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

Обновление: 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 to IE11
• Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
• Хром 14, Хром 20, Хром 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 - как показать всплывающую подсказку ТОЛЬКО при активированном многоточии

Ресурсы:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

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

Хорошо, Firefox 7 реализовал text-overflow: ellipsis так же, как text-overflow: "string". Финальный релиз запланирован на 27 сентября 2011 г.

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

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

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

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

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