Как сделать чтобы текст обрезался css
Перейти к содержимому

Как сделать чтобы текст обрезался css

  • автор:

Как обрезать элемент на CSS (свойства overflow, text-overflow и clip)

По умолчанию если в заданные размеры содержимое блока не помещается, то оно отображается поверх него.

Например, ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово.

CSS свойство overflow

Для предотвращения переполнения у блочных элементов применяется свойство overflow (overflow-x управляет горизонтальной прокруткой, overflow-y — вертикальной). Оно бесполезно для таких HTML элементов как textarea и input.

▼ hidden scroll auto ► x y

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

ооооооооочччччччччееееееееенннннннннььььььььь_длинное_первое_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_второе_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_третье_слово

div < overflow-x-y: visiblehiddenscrollauto; width: 50%; >

overflow и position: absolute;

Элемент с position: absolute; перемещается в рамках другого элемента с position, отличного от static. То есть родитель с overflow: hidden; и position: static; не будет обрезать содержимое потомка с position: absolute; или position: fixed.

▼ hidden r a r s a r s f
position: relative;
position: relative;
overflow: hidden;
position: absolute; position: fixed;

Полоса прокрутки (scrollbar) и position: fixed;

Полоса прокрутки, принадлежащая тегу html, не перекрывается элементом с position: fixed. Это является проблемой для модального окна, распахнутом на весь экран. Решение просто как две копейки: нужно убрать прокрутку у html и добавить при необходимости прокрутку у body.

▼ прокрутка у body
См. красная стрелка в правом нижнем углу браузера.

CSS свойство text-overflow: закончить многоточием

При overflow не в значении visible текст становится не читаемым, обрезаясь на полуслове. Особенно, если его перенос на другую строку запрещён благодаря white-space в значении nowrap. В этом случае можно обозначить, что часть слов убрана и повествование не закончено, воспользовавшись свойством text-overflow.

▼ ellipsis «символ»

обрезать текст по размеру области с добавлением многоточия с добавлением любого знака в HEX кодировке

ооооооооочччччччччееееееееенннннннннььььььььь_длинное_первое_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_второе_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_третье_слово

div < width: 50%; overflow: hidden; white-space: nowrap; word-wrap: normal; /* для IE */ text-overflow: clipellipsis«\2026\20\bb»; > div:hover

CSS свойство clip

Только для элементов, которым задан position: absolute;. Единицы измерения можно выбрать px, em и т.п., но не проценты.

ооооооооочччччччччееееееееенннннннннььььььььь_длинное_первое_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_второе_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_третье_слово

div < width: 50%; position: absolute; clip: rect(auto, auto, auto, auto); /* rect(вверх, вправо, вниз, влево); при auto сторона остаётся без изменений, но вылезающий текст обрезается */ >

CSS свойство clip

6 комментариев:

ololo Отлично! таких примеров нигде еще не встречал. не нужно в блокнот для каждого свойства лесть! NMitra Я к этому варианту пришла через тернистый путь проб и ошибок. Сама без «Шпаргалки» уже не могу — это мой блокнот. ))) Правда всё ещё она не в том состоянии, в котором я её вижу в конечном итоге. Дмитрий Емцов А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй. NMitra Пока это невозможно. Что-то подобное я видела в «черновиках», но на практике нет поддержки браузерами. Евгений Гринец А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй.

some_class:
| First line,
| second line
| and more

.soome_class font-size: 1em;
height: 2em;
overflow: hidden;
>
NMitra Установите height, равную высоте двух строк. height двух строк = line-height * 2

text — overflow

Свойство text — overflow определяет, как будет обрезаться текст, если он не влезает в доступную область полностью. Работает только если элементу заданы также свойства white — space со значением nowrap и overflow со значением hidden , scroll или auto .

Пример

Скопировать ссылку «Пример» Скопировано

Код ниже обрежет текст, добавив в конце строки многоточие. Также добавлены свойства, без которых text — overflow не сработает:

 p  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;> p  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Доступны два значения этого свойства:

  • clip — текст обрезается ровно по краю родительского блока.
  • ellipsis — при обрезке текста в конце строки добавляется многоточие «…», показывая незавершённость предложения.

Обрезаем длинную стро.

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

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

Используем overflow

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

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

HTML5 CSS3 IE Cr Op Sa Fx

    Текст    

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

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

Рис. 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. Текст с многоточием

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

Обрезка текста с добавлением многоточия

Здравствуйте! Как мне сделать, что бы текст, который не вмещается в блок, не переносился на новую строку, а обрезался с добавлением многоточия?

 

123 123 123

Отслеживать
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков
задан 23 дек 2016 в 21:27
452 4 4 серебряных знака 16 16 бронзовых знаков
Не понял вопроса 🙂
23 дек 2016 в 21:28
при нехватки места чтобы текст не переносился на новую строку а пропадал оставляя моготочие
23 дек 2016 в 21:41

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Для этого есть специальный стиль text-overflow

 
Текст: ляляля у меня в шкафу есть трусиля

Отслеживать
ответ дан 23 дек 2016 в 21:56
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков

а если длинный текст ? скажем в пять строчек надо перенести и на пятой строе получится сделать text-overflow: ellipsis; ?

24 дек 2016 в 6:15

text-overflow работает согласно размерам блока и то что не влезет в него, через свойство ellipsis добавиться троеточие. если вам надо после определенного количества знаков поставить троеточие, то это только javascript

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *