it-swarm.com.ru

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

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

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

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

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

208
Sam Stokes

Обновление: теперь поддерживается 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);
    }
};

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

186
Simon Lieschke

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
  • 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 - как можно ли показывать всплывающую подсказку ТОЛЬКО при активированной многоточии

Ресурсы:

44
Adrien Be

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

19
RichieHindle

Хорошо, Firefox 7 реализовал text-overflow: Ellipsis, а также text-overflow: "string". Окончательный релиз запланирован на 2011-09-27.

7
j.j.

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

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

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

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

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

6
Rajat

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

1
Sam Stokes