Главная Ноутбуки

Обрезка одно-, или многострочного текста по высоте с добавлением многоточия. Как обрезать длинную строку по количеству символов css и js решение задачи Искривленные срезанные углы

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

С помощью свойства clip можно обрезать элемент по заданным размерам.

1. Свойство overflow

Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed; . Текст может переполнять блок по высоте, изображения — по высоте и ширине.

Значения:
visible	Значение по умолчанию. Весь контент становится видимым независимо от размеров блока-контейнера. Возможно перекрытия содержимого соседних блоков.
scroll	Добавляет полосы прокрутки внутри области отображения элемента, которые отображаются даже в случае, когда содержимое по размерам помещается внутри блока. Размеры контейнера не меняются.
auto	Добавляет полосы прокрутки только в случае необходимости.
hidden	Скрывает содержимое, выходящее за границы блока. Может скрыть часть содержимого. Используется для блоков-контейнеров, содержащих плавающие элементы. Также предотвращает отображение фона или границ под плавающими элементами (для которых задано свойство float: left / right; . При этом размеры контейнера не изменяются.

Рис. 1. Обрезка содержимого блока с помощью свойства overflow Синтаксис: div { width: 200px; height: 150px; overflow: hidden; } 2. Свойство overflow-x

Свойство задает, как будет обрезаться правый край контента внутри блока в случае его переполнения.

Синтаксис:

Div { overflow-x: hidden; }

3. Свойство overflow-y

Свойство задает, как будет обрезаться нижний край контента внутри блока в случае его переполнения.

Синтаксис:

Div { overflow-y: hidden; }

4. Свойство clip

Свойство определяет, какая часть элемента будет видна. Часть элемента, которая останется видимой после обрезки, называется областью отсечения. Отсечение применяется к элементу, который изначально полностью видимый. Свойство применяется к элементам, для которых установлено свойство position со значениями absolute или fixed .

Добавление многоточия в конце текста можно добиться несколькими путями, в нашем распоряжение css и js.

Для начала разберемся в задаче. Есть разметка блока

Много интересного текста о стилях, верстке, программированию и еще много интересного о сайтах

А как же нам поставить многоточие, если мы не можем ограничить блок размером?

Как на счет js скрипта? Он же может такое, правда

Хм, точно может. Вот держи код, он посчитает юникод символы и обрежет если нужно

Теперь необходимо добиться эффекта обрезания текста в каждом элементе списка, в добавок к этому нужно добавить многоточие.

Обрезка текста css

Для этого создадим стиль для класса tit
.tit {
white-space: nowrap; /* Отменяем перенос текста */
overflow: hidden; /* Обрезаем содержимое */
padding: 5px; /* Поля */
text-overflow: ellipsis; /* Многоточие */
}

Особенность этого решения заключается в том, что если текст поместится в размер блока, то многоточие не будет добавлено. Что не всегда является решением задачи.

Чаще всего необходимо обрезать текст по его длине и только после этого добавить точки.
Также встречаются задачи, когда необходимо в любом случае добавить точки (неважно какой длины текст, хоть 3 буквы). А если текст длиннее определенного размера, то его необходимо обрезать. В этом случае необходимо использовать скрипты.

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

Что мы делаем?

Указываем скрипту какие именно элементы нужно обрабатывать.
Для этого в строке var elem = document.getElementsByClassName("tit"); указываем класс элемента (он должен быть одинаковый).

Затем необходимо задать размер текста до его обрезки. Это наши короткие строки к которым будет добавлено многоточие. За это отвечает переменная var size = 75;

Теперь скрипт должен пройти по всем элементам с нужным классом и проставить многоточие.
Скрипт проверяет длину каждой строки и обрезает текст если его длинна превышает 75 символов. Если длинна меньше, то просто добавляется многоточие (строка if(elem[i].innerHTML.length > size)).

Работу скрипта вы можете посмотреть на demo странице. На этом все, теперь вы знаете как обрезать длинный текст различными методами.

Влад Мержевич

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

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

Используем overflow

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

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

HTML5 CSS3 IE Cr Op Sa Fx

Текст .size { white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ background: #fc0; /* Цвет фона */ padding: 5px; /* Поля */ }

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

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

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

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

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

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

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

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

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Текст .size { white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ padding: 5px; /* Поля */ background: #fc0; /* Цвет фона */ position: relative; /* Относительное позиционирование */ } .size::after { content: ""; /* Выводим элемент */ position: absolute; /* Абсолютное позиционирование */ right: 0; top: 0; /* Положение элемента */ width: 40px; /* Ширина градиента*/ height: 100%; /* Высота родителя */ /* Градиент */ background: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -webkit-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -o-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -ms-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: linear-gradient(to right, rgba(255,204,0, 0.2), #fc0 100%); }

Внутридискретное арпеджио трансформирует полиряд, это и есть одномоментная вертикаль в сверхмногоголосной полифонической ткани.

Данный метод не работает в браузере 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

Текст .size { white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ padding: 5px; /* Поля */ text-overflow: ellipsis; /* Многоточие */ } .size:hover { background: #f0f0f0; /* Цвет фона */ white-space: normal; /* Обычный перенос текста */ } Бессознательное вызывает контраст, это обозначено Ли Россом как фундаментальная ошибка атрибуции, которая прослеживается во многих экспериментах.

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

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

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

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

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

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

Box-text { text-overflow: ellipsis; //образка длинных блоков с текстом overflow: hidden; //прятать выходящий за пределы текст width: 100%; //ширина блока с текстом white-space: nowrap; //запрет на перенос текста }

Всё их оборудование и инструменты были живыми, в той или иной форме.

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

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

Box-text { overflow: hidden; height: 200px; line-height: 25px; } .box-text:before { content: ""; float: left; width: 5px; height: 200px; } .box-text > *:first-child { float: right; width: 100%; margin-left: -5px; } .box-text:after { content: "\02026"; box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

Левая сторона леса была темна, в тени; правая, мокрая, глянцевитая, блестела на солнце, чуть колыхаясь от ветра. Все было в цвету; соловьи трещали и перекатывались то близко, то далеко.

Статьи по теме