قصّ النص الطويل بـ «…» باستخدام CSS

لإبقاء نص طويل في سطر واحد داخل عرض ثابت وإنهائه بـ «…»:

.box {
  width: 300px;
  white-space: nowrap;      /* keep it on one line */
  overflow: hidden;         /* hide what doesn't fit */
  text-overflow: ellipsis;  /* show … at the cut */
}

الخصائص الثلاث مطلوبة معًا. وللنص الذي يجب أن يمتد بضعة أسطر ثم يتوقف، تدعم المتصفحات الحديثة تحديد عدد الأسطر:

.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

البادئة القديمة -o- الخاصة بـ Opera في نسختي من 2013 لم تعد ضرورية.