text-overflow

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .

Синтаксис

text-overflow: clip | ellipsis

Значения

clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.

HTML5 CSS3 IE Cr Op Sa Fx

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

Рис. 1. Многоточие в конце текста

Браузеры

Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .

Скрытие покажет: html и css как инструменты отображения контента

Некоторые элементы страницы необходимо скрывать. Это происходит по разным причинам, однако в особенности скрытие актуально для адаптации веб-ресурса к разным платформам: ПК и мобильным устройствам.

При этом скрытые элементы могут быть не в одном состоянии. Вариантов 3: элемент может быть невидим полностью и, вообще, удалён из потока документов; элемент может быть невидим для пользователя, однако он будет находиться в документе и ассистивные технологии смогут его считать; элемент будет открыт для пользователя, но ассистивные технологии не смогут его считывать.

Всё это можно сделать посредством HTML (язык разметки) и CSS (язык описания внешнего вида документа, в случае данной статьи — страницы) прямо в админке.

Атрибут hidden (убираем полностью)

Скрывает элементы при условии, что их видимость не включена вручную посредством CSS. Вообще, если говорить о последнем, атрибут Hidden работает аналогично CSS-«способу» display: none;

Предположим, какой-то большой заголовок на веб-странице должен отображаться только тогда, когда ширина области отображения элемента больше 500 пкс. В таком случае в HTML пишем:

CSS:
@media (min-width: 500px) h1 display: none;
>
#hidden display: block;
>
>

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

Атрибут aria-hidden (убираем частично)

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

Прописывается в HTML следующим образом:

Чаще всего данный атрибут применяют, чтобы спрятать от программ считывания дублируемый текст, свёрнутые или перемещённые «за экран» элементы, а также чтобы убрать декоративную графику. При этом действие скрытие распространяется только на программы, не на пользователей ресурса.

Свойство opacity (убираем, но не заметаем следы)

Со значением 0 прячет от пользователя (но только от него) элемент со всеми вложениями. При этом на странице вместо скрытого элемента образуется пробел. Данное свойство ненаследуемое.

CSS:
h1 opacity: 0;
>

Свойство visibility (убираем выборочно 2)

Аналог предыдущего. На странице так же остаётся пробел, однако на поток данное изменение не влияет. Здесь важно помнить, если данное свойство применяется к родительскому элементу, то скрыты будут и все потомственные. Чтобы избежать этого для конкретного случая, пропишите тому, что необходимо оставить, visibility: visible.

HTML:

Большой заголовок

Текст статьи.

CSS:
article visibility: hidden;
>

img visibility: visible;
>

В таком случае на странице будет видна только картинка (потомственный элемент родительского — статьи, включающего заголовок, иллюстрацию и текст).

Позиционирование в слепой зоне (убираем, но не очень тщательно)

Спрятать элемент можно, переписав его позицию. Иными словами, поместив необходимую часть наполнения страницы за пределы её видимости или исправив значения размера на 0.

CSS:
img position: right;
top: -100%;
>

Указанное будет перенесено из области видимости на новое прописанное значение, таким образом он будет скрыт из поля зрения пользователя. Однако если последний использует клавиатуру и доберётся до элемента, последний станет видим.

CSS:
img position: right;
top: 0;
>

Свойство clip-path (убираем оригинально)

Скрывает элемент частично. Для определения точных значений, рекомендуется пользоваться программой clippy . Он значительно ускорит и упростит вашу работу.

CSS:
img clip-path: inset(0 0, 0 0, 0 0, 0 0);
>

В данном случае 0 — это значение, при котором кусок элемента не будет видим для пользователя. В clippy вы определяете нужные значения (они будут написаны внизу экрана цветным шрифтом), которые затем копируете из программы и вставляете в CSS вашей страницы. Так же данный инструмент позволяет менять форму объекта (прописывается в коде вместо inset). Например, круг (circle), треугольник (triangle) и т. д.

И ещё кое-что

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

CSS:
.button span color: transparent;
font-size: 0;
>

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

Как скрыть лишний текст в блоке

Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.

HTML-разметка:

Первое что можно сделать, это установить высоту блока, а лишнее скрыть с помощью overflow: hidden .

.items-text

Результат будет не очень информативный:

Многоточие

Свойство text-overflow: ellipsis добавляет многоточие к скрываемому тексту и работает только в паре с white-space: nowrap (отменяет переносы строк). Но можно сделать такой приём для нескольких строк текста с помощью свойств display: -webkit-box и -webkit-line-clamp: 4 .

.items-text

Результат:

Градиент по тексту

В конец блока с текстом можно наложить абсолютный элемент с градиентом от прозрачного до белого, так получится эффект «затухания».

.items-text < overflow: hidden; position: relative; height: 62px; >.items-text:after

Результат:

Второй вариант с затуханием сверху вниз:

.items-text < overflow: hidden; position: relative; height: 62px; >.items-text:after

Результат:

Если используется фоновое изображение, то подойдёт вариант с использованием background-clip: text – наложение изображения или градиента на текст.

.items-text

15.04.2020, обновлено 21.02.2021
Предыдущая запись Contenteditable – текстовый редактор
Следующая запись Работа с архивами через SSH

Комментарии

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Примеры, как вывести текст в три колонки одинаковой ширины и отступом между ними с помощью разных CSS-свойств.

Такой вопрос возникает при вставке текста из формы на сайт (отзывы, комментарии и т.д.) с форматированием элементом p.

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

@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
16k 9 9 золотых знаков 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

Отслеживать
16k 9 9 золотых знаков 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 золотых знаков 59 59 серебряных знаков 121 121 бронзовый знак
ответ дан 4 фев 2017 в 19:56
Utmost Creator Utmost Creator
152 6 6 бронзовых знаков

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

4 фев 2017 в 21:04

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