css троеточие в конце многострочного текста

Допустим у нас есть текст произвольной длины, который должен выводиться внутри блока фиксированной высоты и ширины. Мы хотим, чтобы отображался такой фрагмент текста, который полностью помещается в заданный блок, и многоточие, если текст помещается не полностью. Это довольно распространенная задача, пример подобных блоков показан на рисунке ниже.

В то же время эта задача не является такой тривиальной, как кажется. Давайте рассмотрим возможные варианты ее решения.

Решение на CSS для однострочного текста

Для однострочного текста есть красивое и простое решение на CSS. В этом случае можно использовать свойство text-overflow: ellipsis . При этом контейнер должен иметь свойство overflow равное hidden или clip. Пример:

Решения на CSS для многострочного текста

Один из способов обрезки многострочного текста на CSS использует псевдо-элементы :before и :after.

Другое решение на CSS использует свойство column-w > . Оно задает ширину колонки для многостраничного текста. Вы уже, наверное, догадались, как мы будем его использовать? Правильно, мы зададим ширину колонки, равную ширине блока, а текст, который не помещается в блок, будет во второй, скрытой колонке:

Многоточие при таком способе не добавится, но текст не будет резаться посередине строки.

Интересное решение для многострочного текста на CSS есть для браузеров Webkit. Для этого нужно использовать сразу несколько специфичных свойств с префиксом -webkit:

Свойство -webkit-line-clamp ограничивает количество строк, выводимых в блоке. Работает красиво и элегантно, но из-за своей специфичности в реальном проекте, конечно, такой прием не может использоваться.

Решения на JavaScript

В решении на JavaScript используется еще один невидимый блок, в который мы помещаем нужный текст, потом удаляем по одному символу, пока высота этого блока не станет меньше либо равной высоте нужного блока. И в конце текст помещаем обратно в исходный блок.

Этот же способ можно оформить в виде простенького плагина для jQuery:

Теперь вызов функции обрезки текста сведется к вызову метода truncateText:

Что касается решений на JavaScript, нужно помнить, что операции с DOM’ом: вставка элемента, удаление, изменение его содержимого — являются очень тяжелыми. Поэтому с такими хаками нельзя усердствовать.

Заключение

Мы привели несколько решений для обрезания произвольного текста как на CSS, так и на JavaScript. Если поддержка браузеров позволяет, лучше выбрать решение на CSS — оно будет быстрее, стабильнее, меньше. Если нет — можно использовать JavaScript, но важно помнить о производительности и применять функцию обрезки текста только действительно в нужных местах.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2018

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста. Например, это может понадобиться для мобильной версии сайта или для интерфейса, в котором важно число строк. В подобных случаях имеет смысл обрезать длинные строки текста, оставив только начало предложения. Так мы приведём интерфейс к компактному виду и сократим объём выводимой информации. Само обрезание строк можно делать на стороне сервера с помощью того же PHP, но через CSS это проще, к тому же всегда можно показать текст целиком, например, при наведении на него курсора мыши. Далее рассмотрим методы, как текст порезать воображаемыми ножницами.

На деле всё сводится к использованию свойства overflow со значением hidden . Различия лишь кроются в разном отображении нашего текста.

Используем overflow

Чтобы свойство overflow показало себя с текстом во всей красе, надо отменить перенос текста с помощью white-space со значением nowrap . Если это не сделать, то нужного нам эффекта не будет, в тексте добавятся переносы и он будет отображаться весь целиком. В примере 1 показано, как обрезать длинный текст указанным набором стилевых свойств.

Пример 1. overflow для текста

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста после применения свойства overflow

Как видно из рисунка, недостаток в целом один — не очевидно что текст имеет продолжение, так что надо дать об этом понять пользователю. Для этого обычно применяется градиент или многоточие.

Добавляем градиент к тексту

Чтобы стало понятнее, что текст справа не заканчивается, поверх него можно наложить градиент от прозрачного цвета к цвету фона (рис. 2). При этом будет создаваться эффект постепенного растворения текста.

Рис. 2. Текст с градиентом

В примере 2 показано создание этого эффекта. Стиль самого элемента практически останется прежним, сам же градиент будем добавлять с помощью псевдоэлемента ::after и CSS3. Для этого вставляем пустой псевдоэлемент через свойство content и к нему применяем градиент с разными префиксами для основных браузеров (пример 2). Ширину градиента легко изменять через width , также можно регулировать степень прозрачности, заменив значение 0.2 на своё.

Пример 2. Градиент поверх текста

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Данный метод не работает в браузере Internet Explorer до версии 8.0 включительно, потому что в нём нет поддержки градиентов. Но можно отказаться от CSS3 и сделать градиент по старинке, через картинку в формате PNG-24.

Этот метод сочетается только с однотонным фоном и в случае фоновой картинки градиент поверх текста будет бросаться в глаза.

Многоточие в конце текста

Вместо градиента в конце обрезанного текста также можно использовать многоточие. Причём оно будет добавляться автоматически с помощью свойства text-overflow . Его понимают все браузеры, включая старые версии IE, и единственным недостатком этого свойства является пока его неясный статус. В CSS3 вроде это свойство входит, но код с ним не проходит валидацию.

В примере 3 показано применение свойства text-overflow со значением ellipsis , которое добавляет многоточие. При наведении курсора мыши на текст, он отображается целиком и подсвечивается фоновым цветом.

Пример 3. Использование text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Текст с многоточием

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

Есть ли решение добавить эллипсис на последней строке внутри div с высотой жидкости (20%)?

Я нашел функцию -webkit-line-clamp в CSS, но в моем случае номер строки будет зависеть от размера окна.

У меня есть этот JSFiddle, чтобы проиллюстрировать проблему. https://jsfiddle.net/96knodm6/

html css css3 ellipsis

15 ответов

Наконец-то я нашел решение сделать то, что хочу. Как p paragraphe и article обертка. Если вы хотите применить эллипсис к p в зависимости от высоты article (который также зависит от высоты окна), вам нужно получить height article , line-height p , а затем articleHeight/lineHeight , чтобы найти число line-clamp , которое можно добавить динамически тогда.

Единственное, что line-height должно быть объявлено в файле css.

Проверьте следующий код. Если вы измените высоту окна, значение line-clamp изменится. Может быть здорово создать плагин, нацеленный на это.

58 Michael_B [2015-10-11 05:50:00]

Если вы хотите применить многоточие (. ) к одной строке текста, CSS делает это несколько проще с text-overflow имущество. Это все еще немного сложно (из-за всех требований – см. Ниже), но text-overflow делает это возможным и надежным.

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

Эллипсис для текста с одной строкой

С text-overflow эллипсис может применяться к одной строке текста. Необходимо выполнить следующие требования CSS:

  • должен иметь width , max-width или flex-basis
  • должен иметь white-space: nowrap
  • должен иметь overflow со значением, отличным от visible
  • должен быть display: block или inline-block (или функциональный эквивалент, например гибкий элемент).

Итак, это сработает:

НО, попробуйте удалить width или поместив overflow по умолчанию на visible или удалив white-space: nowrap , или используя что-то иное, кроме элемента контейнера блока, AND, эллипсис терпит неудачу.

Один большой вынос здесь: text-overflow: ellipsis не влияет на многострочный текст. (Только требование white-space: nowrap устраняет эту возможность.)

Эллипсис для многострочного текста

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

Пожалуйста, проверьте этот css для многоточия в многострочном тексте

Оцените статью