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

https://stackoverflow.com/questions/802175

03-07-2019
|

Вопрос

Есть ли какой-нибудь хороший способ обрезать текст с помощью обычного 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 содержимое файла

<?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
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-свойство text-overflow только начиная с 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-via-jquery/

Хорошо, 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-решение.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow