Как скрыть длинный текст css
Перейти к содержимому

Как скрыть длинный текст css

  • автор:

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

Иногда бывает ситуация, когда слишком длинный текст неудобно отображать в блоке на странице, но необходимо дать пользователю информацию о том, текст большой. В данной ситуации используется CSS свойство text-overflow . text-overflow работает в том случае, если для блока c данными, задано значение свойства overflow такое как auto, scroll или hidden и white-space: nowrap. Рассмотрим пример.

Исходный HTML документ:

 class="long-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
.long-text  /* Делаем видиму границу блока и добавляем внутренний отступ */ border: 1px solid #245488; padding: 10px; width: 150px; /* Эти опции - необходимые условия */ overflow: hidden; white-space: nowrap; /* Добавляем троеточия в конце предложения, если текст не помещается в блок */ text-overflow: ellipsis; > 

text-overflow

Результат:

Принудительное укорачивание содержимого div в одну строку в HTML

Для того чтобы текст внутри элемента не переносился на следующую строку, используйте свойство CSS white-space: nowrap; . Чтобы скрыть текст, выходящий за границы элемента, воспользуйтесь свойством overflow: hidden; . А если вам требуется ввести полосу прокрутки, примените overflow: scroll; :

Скопировать код

.div-oneline

Скопировать код

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

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

Если текст не умещается в пределах ширины элемента div, можно элегантно обрезать его с помощью text-overflow: ellipsis; , которое добавит многоточие:

Скопировать код

.div-ellipsis

Установите ширину для div, чтобы продемонстрировать работу свойства text-overflow: ellipsis; :

Скопировать код

Данный текст слишком длинный для области элемента div.

Адаптивное управление с использованием медиа-запросов

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

Скопировать код

.div-responsive < white-space: nowrap; overflow: hidden; >@media (max-width: 600px) < .div-responsive < width: 100%; >>

Контроль над динамическим содержимым

При работе с динамически изменяющимся содержимым элемента div для более точного контроля можно использовать JavaScript. Это даст возможность создавать специальные стили в зависимости от длины содержимого.

Визуализация

Вообразите, что у вас есть поезд ��, где каждый вагон �� — это часть текста внутри объекта div. Чтобы содержать всё в одну линию, используйте следующий CSS:

Скопировать код

.div-train

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

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

Обрамление элемента div разделяет его от остального контента и улучшает визуальное восприятие. Для этого примените свойство border :

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

fccc6953f7174341b1e53bb55ff80cc9.png

Добрый день!
Не могу сообразить, как скрывать текст под многоточие учитывая высоту блока.
Вот тут примерчик, того, как я пробовал сделать.
ps: Результат того, чего я хочу:

  • Вопрос задан более трёх лет назад
  • 18588 просмотров

Комментировать
Решения вопроса 2
Stalker_RED @Stalker_RED
Ответ написан более трёх лет назад
Нравится 10 5 комментариев

slavikse

Вячеслав Лебедев @slavikse Автор вопроса
Дмитрий Филимонов @DmitryPhilimonov

Вячеслав Лебедев: www.mobify.com/blog/multiline-ellipsis-in-pure-css — лучше реализовать это, хотя оно сложнее, но гарантировано будет работать везде. По мне это лучший вариант на текущее время, к тому же очень креативный.

p.s. Я проверял этот вариант сам, у него есть минусы/сложности, когда, например, речь идет про смену фона на hover, но они легко решаются, если есть less или подобное.

slavikse

Вячеслав Лебедев @slavikse Автор вопроса

Дмитрий Филимонов: Понял. Спасибо еще раз 🙂 Думаю, я постараюсь избежать такого использования и просто буду скрывать лишнее, либо еще что придумаю :))

Дмитрий Филимонов @DmitryPhilimonov

Вячеслав Лебедев: мне кажется, что правильный вариант — это иметь дизайн, который разрешает +- туда сюда по строкам (чтобы длинные слова были ОК и так далее) и иметь специальный недлинный текст в такие места (отдельный атрибут в БД). Троеточия в тексте, где много строк, на стороне css/html — это само по себе уже некрасиво. Даже выполнив все условия, может оказаться так, что он ну вот некрасиво обрежется и все 🙂

Как скрыть текст внутри блока?

@teran, это не интересно. Вдруг у меня куча текста с прерываниями (между текстом стоят другие элементы: картинки, блоки) и мне что, каждый кусок текста нужно в span оборачивать?

3 фев 2017 в 17:14
font-size: 0; можно так 🙂
3 фев 2017 в 17:18
@L.Vadim, так добавьте этот вариант ответом. Я задал вопрос, что бы вообще все варианты узнать )
3 фев 2017 в 17:21

@УткаУчитсяУму под цвет эт фока это будет visibility:hidden, но не display:none, а вообще тут тогда и color:transparent подойдёт 🙂

3 фев 2017 в 17:34

6 ответов 6

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

Есть несколько вариантов реализации скрытия текста:

    Просто обернуть текст в блоке в span и скрыть его

.el > span
Текст
Текст
Текст
Текст
Текст

Отслеживать
ответ дан 10 июл 2017 в 17:30
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков

Использовал font-size:0; таким образом скрыл текст

.list < >.list-item < /* text-display: none; */ font-size:0; width:200px; height:20px; background:green; >div

Отслеживать
ответ дан 3 фев 2017 в 17:28
3,416 1 1 золотой знак 10 10 серебряных знаков 18 18 бронзовых знаков

Хм, в Firefox он внезапно не скрылся, слева от зелёного прямоугольника появились пиксели являющиеся текстом, по одному на строку

3 фев 2017 в 17:33
Походу эти пиксели — кружочки от
3 фев 2017 в 17:40
да это кружочки li
3 фев 2017 в 17:42
на всякий случай: list-style: none; если надо скрыть кружочки (а надо ли? они тоже не текст =))
3 фев 2017 в 17:44
@УткаУчитсяУму вроде в вопросе про кружочки не скзано
3 фев 2017 в 17:47

если важно, чтоб текст был но его не было видно — можно использовать:

color: rgba(0, 0, 0, 0); 

Отслеживать
ответ дан 6 июл 2020 в 8:46
Semen Prokhoda Semen Prokhoda
21 1 1 бронзовый знак
Можно ещё указать color: transparent
6 июл 2020 в 10:45

.list-item

Отслеживать
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков
ответ дан 3 фев 2017 в 20:01
Utmost Creator Utmost Creator
152 6 6 бронзовых знаков
Ну этот же вариант скроет всё, а не только текст
3 фев 2017 в 20:03
Нет такого значения. Поменяй none на hidden .
10 июл 2017 в 19:32

Если нужно скрыть только часть текста (например чтобы при наведении показывать весь блок):

.block < width:45px; white-space:nowrap; overflow:hidden >.block:hover
Видно Невидно

Отслеживать
ответ дан 29 сен 2019 в 17:25

.list-item

Отслеживать
22.4k 11 11 золотых знаков 56 56 серебряных знаков 121 121 бронзовый знак
ответ дан 4 фев 2017 в 19:56
Utmost Creator Utmost Creator
152 6 6 бронзовых знаков

Роман, у вас уже ест ответ, дополните его, а не создавайте новый. И — оформляйте код как код, вы же уже делали это в других ответах.

4 фев 2017 в 21:04

@AK, во-первых, это разные ответы и не надо ничего дополнять. Во-вторых, я знаю только один браузер, гда описанное в этом ответе работает: Опера 12. По стандарту это должно игнорироваться.

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

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