Обрезать текст css: Обрезаем длинную стро… | htmlbook.ru – Как при помощи CSS обрезать длинный текст.

Обрезание текста по вертикали или что делать если текст не влез по высоте / Habr


Если вам это знакомо то прошу под кат.

Совсем недавно наткнулся на такую вот проблему. Длительное гугление если и давало результат то очень половинчатый. В CSS для горизонтального переполнения текстом существует text-overflow но вот его аналога для такого переполнения по вертикали нету. Многие предлагают использовать nowrap в месте с text-overflow но такой подход не универсален и мало кому подходит. Если у нас в блоке произвольный html код то выхода нет. На некоторых известных сайтах так и писали: «Для этой задачи нету решения, старайтесь чтобы в блок влезало целое количество строк». Кроме того некоторые предлагали использовать JS, что так же было не приемлемо.
Такие ответы меня не устроили и после часа размышления ответ был найден. Сразу оговорюсь, я не очень завязан на старые браузеры IE но при этом важна работа в старых iOS. Решение на самом деле очень простое и возможно не требует всего того текста, что я уже написал, но очень хотелось поделится тем более я не видел, что бы кто то это использовал именно так.
Так вот для решения этой задачи мы возьмём css multicolumn на Хабре уже много статей на эту тему.

Предложим у нас есть html:

<div>
        <h3>A Long Message</h3>
        <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p>
        <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p>
</div>

И CSS:

h3 {
    font-size: 1.3em;
}

.box {
    margin: 1em;
    border: 1px solid #ccc;
    width: 150px;
    height: 55px;
    overflow: hidden;
}

В этом случае наш текст скорее всего будет разрезан по пополам.
Теперь если мы хотим избавиться от этого эффекта нужно добавить некий wrapper (обёртку):

<div>
    <div>
        <h3>A Long Message</h3>
        <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p>
        <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p>
    </div>
</div> 

Вот с таким или стилем:

.wrapper {
    -webkit-column-width: 150px; //К сожалению тут надо явно указывать размер родительского блока, 100% не работает
    column-width: 150px;
    height: 100%;
}

Собственно и всё… те строки которые не уместились перетекут в следующую колонку, а так как у родительского блока стоит overflow: hidden то мы их не увидим. Минусом такого подхода может быть только скорость отработки этого действия браузером, но она всё равно гораздо быстрее суррогатов на JS. Если волнуетесь по поводу поддержки браузерами то она уже очень хорошая: caniuse.com/multicolumn. Вот работающий пример: jsfiddle.net/4Fpq2/9.
Заранее извиняюсь если это оказалось только для меня открытием.

Свойство text-overflow - добавление троеточия в конец обрезанного текста

Свойство text-overflow добавляет троеточие в конец обрезанного текста в знак того, что текст не помещался в блок и был обрезан.

Для работы свойства текст должен быть обрезан через свойство overflow или свойство overflow-x в значении hidden, auto или scroll. Если задано visible (а так и есть по умолчанию) - text-overflow работать не будет.

Синтаксис

селектор { text-overflow: ellipsis | clip; }

Значения

Значение Описание
ellipsis Добавляет в конец обрезанного текста троеточие.
clip Не добавляет троеточие в конец (это значение по умолчанию, нужно для отмены действия свойства при необходимости).

Значение по умолчанию: clip.

Пример . Вылезающий текст

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div> #elem { width: 200px; overflow: visible; border: 1px solid red; }

:

Пример . Добавим свойство overflow

Сейчас все, что вылезло за границы контейнера, просто обрежется:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div> #elem { width: 200px; overflow: hidden; border: 1px solid red; }

:

Пример . Значение ellipsis

Сейчас в дополнение к свойству overflow добавим еще и text-overflow в значении ellipsis. Обрезанному тексту добавится троеточие в конец:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div> #elem { width: 200px; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; }

:

Пример . С полосами прокрутки

Если задать overflow: auto и text-overflow: ellipsis, то появится полоса прокрутки, но троеточие по-прежнему будет добавлено. Попробуйте прокрутить полосу прокрутки в примере:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div> #elem { width: 200px; overflow: auto; text-overflow: ellipsis; border: 1px solid red; }

:

Пример . Если нет очень длинных слов

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

<div> Lorem ipsum dolor sit amet adipiscing elit. </div> #elem { width: 200px; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; }

:

Пример . Текст в одну строку

Однако, бывают ситуации, когда мы хотим, чтобы текст обрезался, если он слишком длинный (текст вообще, а не отдельные слова) и не переносился на следующую строку. Это делается с помощью добавления свойства white-space в значении

nowrap, которое запретит перенос текста на другую строку. Посмотрите на пример, теперь текст обрезается:

<div> Lorem ipsum dolor sit amet adipiscing elit. </div> #elem { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid red; }

:

Пример . Ширина в процентах

Если задать ширину блока в %, то обрезание тоже будет работать корректно:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div> #elem { width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid red; }

:

Смотрите также

  • свойства word-break и overflow-wrap,
    которые позволяют перенести буквы длинного слова на новую строку
  • свойство hyphens,
    которое включает переносы слов по слогам
  • свойство overflow,
    которое обрезает вылезающие за границу блока части

Flexbox и обрезание текста

Flexbox и обрезание текста

От автора: представим: у нас есть строка текста внутри дочернего элемента flex-контейнера. Вы хотите сделать так, чтобы текст обрезался с добавлением многоточия, а не вел себя, как блоковый элемент (или на крайний случай можно прятать выступающий текст). И вдруг все идет не по плану! Макет не работает, а родительский блок не сжимается. А ведь Flexbox должен был сделать работу с макетом проще!

К счастью есть решение (причем стандартизированное). Для этого придется воспользоваться свойствами, не относящимися к flexbox.

Что мы хотим сделать

Flexbox и обрезание текста

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

Возможная проблема

Flexbox и обрезание текста

Flexbox и обрезание текста

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Проблема в дочерних элементах (flex-элементах)

Странно… когда текст лежит напрямую внутри дочернего элемента, все работает нормально:

<div> <div> Text to truncate here. </div> <div> Other stuff. </div> </div>

<div>

  <div>

    Text to truncate here.

  </div>

  <div>

    Other stuff.

  </div>

</div>

/* Текст напрямую лежит внутри flex-элемента, Который является его оберткой */ .flex-child white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Текст напрямую лежит внутри flex-элемента,

   Который является его оберткой */

.flex-child

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

Проблема возникает, когда добавляются элементы типа:

Flexbox и обрезание текста

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<div> <div> <h3>Text to truncate here.</h3> </div> <div> Other stuff. </div> </div>

<div>

  <div>

    <h3>Text to truncate here.</h3>

  </div>

  <div>

    Other stuff.

  </div>

</div>

/* Теперь текст является заголовком, Чтобы все работало, текст нужно обрезать */ .flex-child > h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Теперь текст является заголовком,

  Чтобы все работало, текст нужно обрезать */

.flex-child > h3 {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

Решение – необходимо добавить свойство min-width: 0; к flex-элементу

Или какое-либо другое значение для min-width. Без этого flex-элемент, содержащий другие текстовые элементы внутри себя, не будет сжиматься.

Когда я впервые столкнулся с этой проблемой, я нашел способ Pen by AJ Foster. Автор пишет: «По спецификации текст выше не должен сжаться до нуля, если слишком сильно сжать родительский блок. Так как в классе .subtitle ширина задана на 100%, а min-width: auto, то flexbox делает контейнер больше, чем нам нужно.»

Способ работает в Chrome, Opera и Firefox. В Safari текст обрезался даже без свойства min-width (вопреки спецификации).

Работает: Текст лежит напрямую внутри дочернего элемента

Не работает: Текст в дочернем элементе обернут в тег <h3>

Работает: Текст обернут в <h3>, но flex-элементу задано свойство min-width

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Flexbox и обрезание текста

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Flexbox и обрезание текста

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Как ограничить длину текста с помощью css

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

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

С помощью стилей мы можем задать любому тексту определенную высоту, зайдя за которую, текст как бы обрезается и общая высота остается одинаковой для всех элементов. Рассмотрим два css метода реализации:

1. Ограничить высоту блока с текстом

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

<div>
Здесь какой-то длинный текст, например в 600 символов...
</div>

С помощью overflow: hidden; обрезается все, что превышает высоту дива в height: 31px; За счет font-size и line-height вы можете регулировать междустрочный интервал и размер шрифта, чтобы в данный див влезало, к примеру ровно две строки.

2. Ограничиваем длину текста с помощью text-overflow

Это дасточно новый метод, который я использую недавно. Он позволяет ограничивать высоту текста по строкам. Рассмотрим пример (только стиль):

<style>
.zagolovok {
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
-ms-line-clamp: 2;
-webkit-line-clamp: 2;
line-clamp: 2;
display: -webkit-box;
display: box;
word-wrap: break-word;
-webkit-box-orient: vertical;
box-orient: vertical;
font-size: 15px;
line-height: 19px;
}
</style>

Здесь задан класс .zagolovok, который мы можем назначить на любой тег. В итоге, если текст будет больше двух строк, то он автоматически обрежется, а после него пропишется знак многоточия. Количество строк задается с помощью line-clamp. Заметьте, здесь нам не приходится использовать height для принудительного обрезания по высоте.

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

Отправить ответ

avatar
  Подписаться  
Уведомление о