|
Как обрезать текст по высоте с помощью CSS
|
|
| Kosten | Воскресенье, 01 Июля 2018, 05:34 | Сообщение 1 |
| Если кто не в знает, что добавление и переполнения многоточия к текстовому элементу не является эффективным содержанием. Однако все же имеет смысл использовать эту технику для некоторых элементов пользовательского интерфейса. Независимо от того, разумно ли применять эту технику к вашему контенту, это зависит от вас. Самый простой и более пуленепробиваемый способ обработки много строчного усечения строк, поэтому я обнаружил, что мы можем обрезать строку, используя два тщательно размещенных псевдо-элемента CSS.
Много раз текст может действительно разрушить дизайн вашего сайта, особенно когда нет способа узнать, сколько текста может содержать каждый элемент. Вы могли бы создать свой сайт, чтобы выглядеть хорошо всего несколькими строками текста, но намного позже отображается весь. Способ исправить это - добавление css в элемент, который ограничит видимость текста после определенной точки. Визуально привлекательный способ сделать это - вырезать текст в определенной точке и добавить многоточие.
Если вы заметили, последний эффект отлично подходит для добавления многоточия в отдельные строки текста, но текст не будет разбиваться на несколько строк из-за строки. Это заставляет текст оставаться на одной линии независимо от того, как долго это происходит. Чтобы исправить это и показать несколько строк текста перед добавлением многоточия, мы должны использовать следующий класс.
Приступаем к установке:
HTML
Код <p class="text-rings-responsively"> Здесь будет находится знаки или большая статья</p>
CSS
Код .text-rings-responsively {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 2.5em;
text-align: justify !important;
padding-right: 39px;
padding-left: 1em;
}
.text-rings-responsively:before {
content: '';
position: absolute;
right: 19px;
bottom: 0;
}
.text-rings-responsively:after {
content: '';
position: absolute;
right: 19px;
width: 2em;
height: 2em;
margin-top: 0.3em;
background: white;
}
Как это работает:
Представим себе, что нам нужно содержать блок текста до максимум 3 строк. Чтобы сделать это, мы должны обрабатывать следующие случаи:
1. Текст более 3 строк;
2. Текст меньше 3 строк;
3. Текст ровно 3 строки;
Какая выгода:
1. Чистый CSS;
2. Отзывчивый;
3. Нет необходимости пересчитывать при изменении размера или события загрузки шрифта;
4. Кросс-браузер;
Также не забываем, что при установки, что то может быть не корректно, а это показатся нижнее строка, все насттраевается в CSS, где сами можете выстроить конфигурацию, как кам нужно, или чтоб удобно было. Но и не забываем про многоточие, что с стилях отвечает content: ''; - как видим сейчас в нем все точни убраны, что можно установить, если хотите, чтоб они были, а также можно одну прописать, так как срез идет на пробеле, что возможно будет по теме точка выставлена.
Заметка: Для эффекта эллипса требуется webkit, а это означает, если кто-то просмотрит его с помощью браузера, который не поддерживает webkit, тогда они не будут видеть многоточие "..." но текст по-прежнему будет отрезан в правильной точке, поэтому этот эффект по-прежнему будет работать во всех основных браузерах.
Точки со стиля были убраны, то нем сейчас многоточие, кому нужно поставить, сейчас работает при таком раскладе, просто останавливается на пробеле. Так, чтоб строка была полной по ширине, чтоб смотрелось корректно.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 01 Июля 2018, 06:46 | Сообщение 2 |
|
| Здесь также всегда применял стили на вывод краткого описание, чтоб смотрелось корректно. Где вместо оператора MESSAGE - который отвечает за вывод описание, вы можете самостоятельно выставить знаки.
Как пример:
HTML
Код <div class="bemerka-text">$MESSAGE$</div>
CSS
Код .bemerka-text {
opacity: 0.8;
margin-bottom: 5px;
padding: 0 0px;
height: 85px;
overflow: hidden;
text-align: justify;
}
| | Страна: (RU) |
| |
| workman | Понедельник, 02 Июля 2018, 14:48 | Сообщение 3 |
| Kosten, Добавь в css еще это text-overflow: ellipsis; это поставит многоточие
| | Страна: (RU) |
| |
| workman | Понедельник, 02 Июля 2018, 14:56 | Сообщение 4 |
|
| ну или с помощью JS примерно так
Код <script type="text/javascript">
var size = 120, // количество символов
newsContent= $('.bemerka-text'),
newsText = newsContent.text();
if(newsText.length > size){
newsContent.text(newsText.slice(0, size) + ' ...');
}</script>
Сообщение отредактировал
workman - Понедельник, 02 Июля 2018, 14:58 | | Страна: (RU) |
| |
| Kosten | Понедельник, 02 Июля 2018, 20:14 | Сообщение 5 |
|
| workman, а куда устанавливать и под какой модуль.
| | Страна: (RU) |
| |
| workman | Понедельник, 02 Июля 2018, 23:59 | Сообщение 6 |
|
| ЛЮБОЙ МОДУЛЬ ... ХОТЬ НАЗВАНИЕ ЛЮБОЙ ТЕМЫ, $TITLE$, $MESSAGE$, $CUT$ и т.д
Какой именно текст обнимешь в Код <div class="bemerka-text">тут длинный текст</div>
Код var size = 100, // количество символов 100
newsContent= $('.text1'),
newsText = newsContent.text();
var size = 200, // количество символов 200
newsContent= $('.text2'),
newsText = newsContent.text();
var size = 300, // количество символов 300
newsContent= $('.text3'),
newsText = newsContent.text();
if(newsText.length > size){
newsContent.text(newsText.slice(0, size) + ' ...');
Сообщение отредактировал
workman - Вторник, 03 Июля 2018, 00:03 | | Страна: (RU) |
| |
