Firefox теж вміє ставити три крапки (text-overflow ellipsis) · як зробити ·

Час від часу виникають завдання, де було б дуже корисно вміти обрубувати рядки до певної довжини, залишаючи в кінці три крапки. Як правило це необхідно, коли потрібно вивести рівний табличний список заздалегідь невідомих значень, на зразок списку листів або назв об'єктів / файлів в різноманітних веб-інтерфейси.

Такі завдання є, напевно єдиним приводом, щоб зазвичай ненавідащіе Internet Explorer кодери, сказали пару неласкавих слів в бік Firefox. А причина в тому, що Explorer підтримує (поки ще, але має з'явитися в CSS3) нестандартне властивість text-overflow, а Firefox - немає (глюк № 312156). Навіть Opera і Safari дають можливість скористатися нестандартної фичей.

Для незнайомих з цим CSS-властивість товаришів скажу пару слів про нього. Відомо, що задаючи розміри якого-небудь блокового елемента, весь його вміст, що не влазять в батьківські розміри елементарно. стирчать з нього. А в CSS є властивість (overflow), яким можна поставити що робити з стирчать частинами внутренних елементів. Варіанти по-суті три: показувати поверх або знизу поруч розташованих елементів (visible, по-замовчуванню), обрізати і не показувати нічого (hidden) і нарешті - показати смуги прокрутки, щоб користувач все-таки зміг побачити що там (scroll та auto - подробиці в описі властивості).

Все це звичайно дуже добре, але в разі, коли стирчать частини приховані, часто виникає дуже неприємний ефект зрізаної посередині букви. Це повинно бути видно в наступному прикладі (якщо рядок не обрезается по середині букви - пограйте з розмірами вікна браузера):

Приклад 1: обрізання рядки посередині букви

Текстовий рядок, яка не переноситься і тому може бути обрізана батьком.

Використовуючи анонімний елемент ми втрачаємо можливість виділяти і копіювати текст мишкою. У багатьох випадках це не критично, тим більше, що виділивши шматок тексту перед і після обрізаної рядки, можна скопіювати і текст, який ми перекрили. Але тим не менше не можна виділити шматок цього тексту і виділяючи текст всій сторінці ці рядки залишаться невиділеними.

Друге обмеження пов'язане з тим, що в Firefox, на відміну від інших браузерах, не можна використовувати рядкові елементи в обрізати тексті. Будь-які оформлення тексту будуть втрачені. Посилання не працюватимуть. Це пов'язано з тим, що текст копіюється в атрибут value, де розмітка не може працювати.

Якщо виділення тексту і вкладені елементи для вас не є критичними - використовуйте варіант з XML-обв'язкою.