Усечение длинных строк с помощью CSS: возможно?

Есть ли хороший способ обрезания текста с помощью простого HTML и CSS, чтобы динамический контент мог поместиться в макете с фиксированной шириной и высотой?

Я обрезал серверную сторону по логической ширине (т. Е. Слепо угаданное число символов), но поскольку «w» шире, чем «i», это имеет тенденцию быть субоптимальным, а также требует, чтобы я переучивал ( и сохранить настройку) количество символов для каждой фиксированной ширины. В идеале усечение произойдет в браузере, который знает физическую ширину визуализированного текста.

Я обнаружил, что IE имеет свойство text-overflow: ellipsis которое делает именно то, что я хочу, но мне нужно, чтобы это было кросс-браузер. Это свойство кажется (несколько?) Стандартным, но Firefox не поддерживается. Я нашел различные обходные пути, основанные на overflow: hidden , но они либо не отображают многоточие (я хочу, чтобы пользователь знал, что контент был усечен), либо отображать его все время (даже если контент не был усечен) ,

У кого-нибудь есть хороший способ подгонки динамического текста в фиксированном макете или усечение на стороне сервера по логической ширине так же хорошо, как я собираюсь сейчас?

    Обновление: text-overflow: ellipsis теперь поддерживается с Firefox 7 (выпущен 27 сентября 2011 г.). Ура! Мой оригинальный ответ следует за исторической записью.

    Джастин Максвелл имеет кросс-браузерное решение CSS. Однако он имеет недостаток, но не позволяет выбрать текст в Firefox. Зайдите в его гостевую почту в блоге Мэтта Снайдера, чтобы получить подробную информацию о том, как это работает.

    Обратите внимание, что этот метод также предотвращает обновление содержимого узла в JavaScript с использованием свойства innerHTML в Firefox. См. Конец этого сообщения для обходного пути.

    CSS

     .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); } 

    Содержание файла ellipsis.xml

               

    Обновление содержимого узла

    Чтобы обновить содержимое узла таким образом, который работает в Firefox, используйте следующее:

     var replaceEllipsis(node, content) { node.innerHTML = content; // use your favorite framework to detect the gecko browser if (YAHOO.env.ua.gecko) { var pnode = node.parentNode, newNode = node.cloneNode(true); pnode.replaceChild(newNode, node); } }; 

    См. Сообщение Мэтта Снайдера для объяснения того, как это работает .

    2014 Март: Усечение длинных строк с помощью CSS: новый ответ с упором на поддержку браузера

    Демо на http://jsbin.com/leyukama/1/ (я использую jsbin, потому что он поддерживает старую версию IE).

      Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used 

    Свойство -ms-text-overflow CSS необязательно: это синоним свойства CSS-переполнения CSS, но версии IE с 6 по 11 уже поддерживают свойство CSS переполнения текста.

    Успешно протестирован (на Browserstack.com) в ОС Windows, для веб-браузеров:

    • IE6 для IE11
    • Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
    • Chrome 14, Chrome 20, Chrome 25
    • Safari 4.0, Safari 5.0, Safari 5.1
    • Firefox 7.0, Firefox 15

    Firefox: как отметил Саймон Лишке (в другом ответе), Firefox поддерживает только свойство CSS переполнения от Firefox 7 (выпущено 27 сентября 2011 г.).

    Я дважды проверял это поведение на Firefox 3.0 и Firefox 6.0 (переполнение текста не поддерживается).

    Некоторое дополнительное тестирование на веб-браузерах Mac OS будет необходимо.

    Примечание: вы можете показать всплывающую подсказку при наведении мыши при применении многоточия, это можно сделать с помощью javascript, см. Следующие вопросы: определение эллипсиса текстового переполнения HTML и HTML – как показать всплывающую подсказку ТОЛЬКО при активации многоточия

    Ресурсы:

    Если у вас все в порядке с решением для JavaScript, есть плагин jQuery для этого в кросс-браузерном режиме – см. http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -Firefox-через-JQuery /

    ОК, Firefox 7 реализовал text-overflow: ellipsis а также text-overflow: "string" . Окончательный выпуск запланирован на 2011-09-27 годы.

    Другим решением проблемы может быть следующий набор правил CSS:

     .ellipsis{ white-space:nowrap; overflow:hidden; } .ellipsis:after{ content:'...'; } того, как .ellipsis{ white-space:nowrap; overflow:hidden; } .ellipsis:after{ content:'...'; } 

    Единственным недостатком вышеприведенного CSS является то, что он добавит «…» независимо от того, переполняет ли текст контейнер или нет. Тем не менее, если у вас есть случай, когда у вас есть куча элементов и вы уверены, что содержимое будет переполнено, это будет более простой набор правил.

    Мои два цента. Шляпы на оригинальную технику Джастина Максвелла

    Для справки, вот ссылка на «ошибка» отслеживания text-overflow: поддержка эллипсиса в Firefox . Похоже, что Firefox – единственный крупный браузер, который не поддерживает родное решение CSS.

     .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
    Давайте будем гением компьютера.