• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как обрезать текст по высоте с помощью CSS (Способ обрезания многострочного текста по высоте)
Как обрезать текст по высоте с помощью CSS
Kosten
Воскресенье, 01 Июля 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Если кто не в знает, что добавление и переполнения многоточия к текстовому элементу не является эффективным содержанием. Однако все же имеет смысл использовать эту технику для некоторых элементов пользовательского интерфейса. Независимо от того, разумно ли применять эту технику к вашему контенту, это зависит от вас. Самый простой и более пуленепробиваемый способ обработки много строчного усечения строк, поэтому я обнаружил, что мы можем обрезать строку, используя два тщательно размещенных псевдо-элемента 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, тогда они не будут видеть многоточие "..." но текст по-прежнему будет отрезан в правильной точке, поэтому этот эффект по-прежнему будет работать во всех основных браузерах.

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

Демонстрация
Прикрепления: 5589932.jpg (48.3 Kb) · 9990372.png (100.4 Kb) · 1016837.png (22.6 Kb) · 5394781.png (38.6 Kb)
Страна: (RU)
Kosten
Воскресенье, 01 Июля 2018 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Здесь также всегда применял стили на вывод краткого описание, чтоб смотрелось корректно. Где вместо оператора 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;
}
Прикрепления: 2679935.png (51.4 Kb)
Страна: (RU)
workman
Понедельник, 02 Июля 2018 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Kosten, Добавь в css еще это text-overflow: ellipsis; это поставит многоточие
Страна: (RU)
workman
Понедельник, 02 Июля 2018 | Сообщение 4
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
ну или с помощью 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 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
workman, а куда устанавливать и под какой модуль.
Страна: (RU)
workman
Понедельник, 02 Июля 2018 | Сообщение 6
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
ЛЮБОЙ МОДУЛЬ ... ХОТЬ НАЗВАНИЕ ЛЮБОЙ ТЕМЫ, $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)
Форум » Web-Раздел » Начинающему вебмастеру » Как обрезать текст по высоте с помощью CSS (Способ обрезания многострочного текста по высоте)
  • Страница 1 из 1
  • 1
Поиск: