قصّ النصّ الطويل

العنوان الطويل في بطاقة ضيّقة ينزل إلى سطرين أو ثلاثة، فتختلف ارتفاعات البطاقات ويختلّ الصفّ، والحلّ المعتاد أن تقصّه وتضع علامة الحذف … مكان الجزء المقصوص.

ولقصّ سطر واحد تحتاج إلى ثلاث خصائص معًا: white-space: nowrap تمنع النصّ من النزول إلى سطر جديد، وoverflow: hidden تخفي ما زاد عن العرض، وtext-overflow: ellipsis تضع العلامة. والفخّ أن تكتب الثالثة وحدها فلا يحدث شيء، لأن العلامة لا تظهر إلا على نصّ أطول من مكانه فعلًا ومخفيّ ما زاد منه.

ولقصّ أكثر من سطر تستعمل -webkit-line-clamp مع display: -webkit-box و-webkit-box-orient: vertical، والبادئة -webkit- قديمة لكنها مدعومة في كل المتصفحات. ولا يؤثّر القصّ إلا فيما تراه العين، فالنصّ كله يبقى في الصفحة لقارئ الشاشة ومحرّك البحث.