في أي محرر نصوص، عادة عندما يتجاوز طول النص عرض السطر فإنه يتم كسره إلى السطر الثاني، وهكذا (تدعى Text Wrapping)...
الآن أنا قمت بكتابة كود HTML لصفحة ما، تحتوي على نص طويل داخل جدول عرضه 500 بكسل... عند عرض الصغحة في Internet Explorer و Firefox فإن كل شيء يظهر بشكل سليم، والنص يتم كسره على ثلاثة أسطر مثلاً...
المشكلة عندما أحول هذا النص إلى رابط (بأن أضعه ضمن معرف Anchor بالـ HTML)، فإن Internet Explorer يحافظ على التصرف بشكل صحيح، بينما يرفض Firefox كسر النص إلى سطور، فيظهر النص على سطر واحد طويييل يتجاوز مساحته المخصصة في التصميم ويشوه المنظر...
هل يعرف أحد كيف أجبر Firefox على كسر نصوص الروابط الطويلة؟ هل هناك خاصية Cascading style sheet لهذا الأمر، أو خاصية لمعرف الـ Anchor لهذا الغرض؟
أخي وسام قد تساعدك خاصية overflow يمكن اسناد قيمة hidden لهذه الخاصية ليتم اخفاء الجزء الخارج عن حدود النص.
جربت أولا فكرة وضع الـ anchor فقط ضمن division وتحديد overflow:hidden للـ division لكن في هذه الحالة يتم إضافة
break line قبل و بعد الرابط، جربت تحديد خاصية display:inline لحل المشكلة فتم إلغاء أثر الـ overflow:hidden
الفكرةالثانية هي تحديد overflow:hidden لكامل الفقرة التي تحتوي على anchors
مثال
Please visit
href="InstructurezProfessionalCommunityInstru">http://www.agdn-online.com">InstructurezProfessionalCommunityInstru
cturezProfessionalCommunity on the web
بهذه الطريقة يتم إخفاء الجزء المتعدي من الرابط وذلك فقط في حال تجاوز طول الرابط حدود الفقرة
الخبر السيء أن هذه الطريقة تعمل على Firefox لكنها لم تلقى قبولا عن السيد IE6
بقى تجربة إحاطة كامل الفقرة بـ division وتحديد overflow:hidden للـ division ربما يقتنع IE
طبعا في حال نجحت احدى الطرق فالأفضل استخدام CSS بشكل خارجي و تعريف class خاص للفقرة أو الـ division
بالمناسبة أقوم حاليا بالقراءة عن CSS بشكل أوسع، وقد فوجئت بأشياء لم أكن أعرفها عن هذه التقنية، هناك الكثير الكثير من الحيل والإمكانيات المذهلة التي يتم اكتشافها يوما بعد يوم، خاصة بعد دعم المتصفحات الحديثة لـ CSS1 و CSS2 بشكل كامل، نقص الدعم الكامل والدعم الخاطئ Buggy خاصة IE أدى لابتعاد مصممي المواقع عن CSS، أما الآن مع Firefox و IE7 على الأبواب، فالأمور ستتغير كثيرا
هذا الموقع مثلا خصصه إريك ماير لرفع حدود الممكن بواسطة CSS.. العروض هنا تستخدم CSS و XHTML فقط.. الحقيقة شيء مدهش، هذا الموقع يمكن أن يستخدم لاقناع الناس باستخدام Firefox لأن بعض المؤثرات لا تعمل على IE6 http://www.meyerweb.com/eric/css/edge/
أيضا هذا موقع يحتوي على غرائب CSS مدهشة، بغض النظر عن التصميم الفني الأكثر من رائع.. لاحظ طريقة عمل الروابط في منتصف الصفحة، ربما تلهمك بحيلة ما http://veerle.duoh.com/