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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

Примечание. Этот метод также предотвращает обновление содержимого node в 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>

Обновление node контента

Чтобы обновить содержимое node таким образом, который работает в 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);
    }
};

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

Ответ 2

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 a bit too long and the text overflow ellipsis feature is used</span>

Свойство CSS-переполнения -ms-text-overflow необязательно: это синоним свойства 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 - как показать всплывающую подсказку ТОЛЬКО при активации многоточия

Ресурсы

Ответ 4

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

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

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