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

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

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

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

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

7 ответов


обновление: 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 содержимое файла

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Обновление контента узле

чтобы обновить содержимое узла таким образом, который работает в 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).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>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</span>

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

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

  • в IE6 до IE11
  • Опера 10.6, Опера 11.1, Опера 15.0, Опера 20.0
  • Хром 14, Хром 20, Хром 25
  • Сафари 4.0, Сафари 5.0, Сафари 5.1
  • Firefox 7.0, Firefox 15

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

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

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

Примечание: Вы можете показать подсказку при наведении мыши, когда применяется многоточие, это можно сделать с помощью javascript, см. Эти вопросы:HTML text-обнаружение переполнения многоточия и HTML - как я могу показывать всплывающую подсказку только при многоточии


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


OK, Firefox 7 реализован text-overflow: ellipsis а также text-overflow: "string". Финальный релиз запланирован на 2011-09-27.


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

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

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

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


для справки, вот ссылка на отслеживание "ошибка"переполнение текста: поддержка многоточия в Firefox. Похоже, Firefox-единственный крупный браузер, который не поддерживает собственное решение CSS.


.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}