Как спрятать текст css

Как скрыть строку html

Чтобы скрыть строку HTML, можно использовать CSS свойство display и установить его значение равным none. Вот несколько способов скрыть строку HTML:

Используя инлайн-стили:

 style="display: none;">Эта строка будет скрыта 

Используя класс:

 class="hidden">Эта строка будет скрыта 

.hidden  display: none; > 

Используя идентификатор:

 id="hidden-text">Эта строка будет скрыта 

#hidden-text  display: none; > 

Используя псевдокласс :hidden :

 class="hidden">Эта строка будет скрыта 

.hidden  display: none; > 

p:hidden  color: red; > 

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

Как спрятать всё, что не поместилось в элементе

CSS-свойство overflow отвечает за то, что происходит с содержимым блочного элемента, когда оно выходит за границы. Например, если картинка выпадает из родительского контейнера, вы можете её обрезать или добавить полосу прокрутки.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Чтобы указать, как должно отображаться содержимое элемента…

 
Константиновский Константин Константинович
 
 

.container

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

Значения overflow

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

Значение hidden скрывает часть содержимого, которая не поместилась в контейнере.

Значение scroll добавляет полосы прокрутки.

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

Это значение более гибкое: при overflow: scroll полосы прокрутки сохраняются, даже если элемент помещается в контейнере, а при overflow: auto они исчезают.

Ошибки при использовании overflow

Использовать overflow: hidden для обрезки важного текста — пользователь не увидит спрятанную информацию и не поймёт написанное. Гораздо уместнее использовать это значение для оформления сайта, например, чтобы обрезать часть декоративного изображения.

Использовать overflow: scroll для всего содержимого страницы — если так сделать, на странице появятся лишние полосы прокрутки.

Наследуется ли свойство overflow

Свойство не наследуется, но дочерние элементы будут отображаться с учётом значения overflow . Например, здесь текст «Я вообще не влезаю в эту строку» обрежется, если выйдет за пределы :

 
 
Я вообще не влезаю в эту строку
 
 

.parent

Для дочерних элементов можно прописать собственное значение overflow :

 
 
Я вообще не влезаю в эту строку
 
 

.parent < overflow: hidden; >.child

В этом примере мы задали дочернему элементу свойство overflow: auto . То есть содержимое будет обрезано, но появится полоса прокрутки.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Игры с бесконечностью, или зачем нам infinity в CSS

�� Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/

В CSS есть константа Infinity. Когда я только узнал об этом, ко мне в голову сразу пришла гора абсурдных идей, как это использовать, среди которых была и пара неплохих.

Ну, мне так кажется.

Кстати, если что, infinity можно использовать только внутри calc() . Ну, поехали!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 5 марта 2024

Межстрочное расстояние в CSS. Свойство line-height

line-height задает интерлиньяж, то есть расстояние между базовыми линиями соседних строк текста. Это свойство может влиять на читабельность текста и его восприятие.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Значение line-height можно указывать как в абсолютных единицах (например, px , pt ), так и в относительных ( em , % , без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.

• line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
• line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
• line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.

• 4 марта 2024

Свойство text-align

Свойство text-align в CSS используется для определения горизонтального выравнивания текста внутри элемента.

�� Сегодня вам бесплатно доступны тренажёры по HTML и CSS.

Свойство text-align может принимать несколько значений, включая:

• left — выравнивает текст по левому краю контейнера.
• right — выравнивает текст по правому краю контейнера.
• center — центрирует текст внутри контейнера.
• justify — выравнивание текста по ширине. Оба края текста (левый и правый) будут выровнены по краям контейнера.

Пример использования свойства text-align :

Этот код выравнивает текст внутри всех параграфов ( ) по центру.

Для практики и улучшения своих навыков работы с text-align и другими свойствами CSS, рекомендуем пройти тренажёр. Он поможет лучше понять, как работает выравнивание текста, и даст возможность попрактиковаться в использовании различных значений свойства text-align .

• 4 марта 2024

CSS-препроцессоры в 2024. Большой обзор

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

Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте. В обзоре рассмотрим наиболее популярные препроцессоры в 2024 году и расскажем, как выбрать подходящий.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 29 февраля 2024

Как прятать

Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

• 28 февраля 2024

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

• 13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот что получится в итоге:

• 7 сентября 2023

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

@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 золотых знаков 58 58 серебряных знаков 121 121 бронзовый знак
ответ дан 4 фев 2017 в 19:56
Utmost Creator Utmost Creator
152 6 6 бронзовых знаков

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

4 фев 2017 в 21:04

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

Как скрыть лишний текст?

Здравствуйте коллеги, нужна ваша помощь, есть блок фиксированной высоты, как убрать лишний текст, выходящий за пределы блока, и добавить гиперссылку в конце, по типу «подробнее», «далее» и т.д.. Прошу учесть то, что блоков с текстом произвольное количество и у них всех одинаковый класс.
Также даю ссылку на JsFiddle https://jsfiddle.net/t8xcLf2k/1/

Дополнение:
— Желательно без сторонних плагинов
— Что-то по типу этого

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