Имитация переполнения текста: многоточие в CSS2 - PullRequest
1 голос
/ 06 мая 2011

Есть ли способ имитировать text-overflow: ellipsis с помощью CSS2?

Я нашел это решение, которое эмулирует переполнение текста: многоточие в Firefox с CSS , но оно не работает.

Меня не интересует решение JavaScript.

Ответы [ 2 ]

4 голосов
/ 30 июля 2011

На самом деле в CSS не существует удовлетворительного способа достижения того же результата, что и text-overflow без фактического использования text-overflow.Было несколько попыток, но на самом деле ничего не помогало.

Единственное работающее не-Javascript решение, которое я видел, было такое, которое использовало -moz-binding в таблице стилей для присоединения блока кода XUL к элементу,который сделал многоточие.Это работало довольно хорошо (за исключением нескольких побочных эффектов) в Firefox 3.x, но больше не работает в Firefox 4 и выше, так как они отказались от поддержки функции привязки из соображений безопасности.

Хорошие новостив том, что text-overflow вводится в Firefox и должен появиться с FF7 (выйдет позже в этом году благодаря ускоренному циклу выпуска).Это еще немного подождать, но, по крайней мере, мы знаем, что это произойдет сейчас.

Между тем, Firefox 4/5/6 остается единственным крупным браузером, где вы просто не можете получить рабочий многоточие в CSS, ибез какой-либо хорошей альтернативы

Одним из креативных решений, которое я видел, было использование эффекта прозрачности градиента на правом конце текстового элемента, чтобы создать эффект затухания вместо использования многоточия.Это другой вид, но он обеспечивает те же визуальные подсказки, что и многоточие, и его можно достичь в большинстве браузеров (хотя вы можете предпочесть сделать его специфичным для Firefox и продолжать использовать многоточие для всех остальных).

Надеюсь, что это поможет.

Кстати, вас также может заинтересовать этот вопрос, который я задал несколько месяцев назад, где он подробно обсуждался: переполнение текста: многоточие вFirefox 4?(и FF5)

0 голосов
/ 10 июня 2011

Похоже, что это работает везде, кроме Ubuntu + Chrome: http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Реализация компаса: http://compass -style.org / reference / compass / typography / text / ellipsis /

...