HTML — показать/скрыть текст
Иногда возникает необходимость вставки кода, позволяющего показать или скрыть слой с картинкой или текстом по клику на кнопку. И хотя в Сети много вариантов подобного решения — бОльшая часть из них использует в своем механизме Java или jquery.
А ведь проблему можно решить и с помощью штатных средств HTML ��
.del:not(:checked) + label + *
/* тут редактируем вид кнопки */
.del:not(:checked) + label,
.del:checked + labeldisplay: inline-block;padding: 2px 10px;border-radius: 2px;color: #fff;background: #4e6473;cursor: pointer;.del:checked + labelbackground: #e36443;Как скрыть строку 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 также может изменить расположение остальных элементов на странице, поэтому вам может понадобиться добавить дополнительные стили для корректной компоновки.
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
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-text15.04.2020, обновлено 21.02.2021
Предыдущая запись Contenteditable – текстовый редактор
Следующая запись Работа с архивами через SSHКомментарии
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
Примеры, как вывести текст в три колонки одинаковой ширины и отступом между ними с помощью разных CSS-свойств.
Такой вопрос возникает при вставке текста из формы на сайт (отзывы, комментарии и т.д.) с форматированием элементом p.
Как спрятать часть текста на CSS или кнопка"Еще"?
Есть блок в котором находится описание товара. Возможно ли сделать с помощью свойств CSS, если текст больше блока, то часть его скрывается и появляется кнопка, по нажатию на которую блок с текстом полностью открывается. Сейчас в голове только вариант с помощью overflow: hidden и js или label, input. менять высоту блока.
Отслеживать
задан 22 ноя 2016 в 12:14
4,936 3 3 золотых знака 18 18 серебряных знаков 38 38 бронзовых знаков2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Можно вот так сделать
button .text < display: block; width: 300px; height: 10px; border: 1px solid black; padding: 5px; margin-top: 5px; outline: none; overflow: hidden; >.text:focus, button:focus ~ .textОтслеживать
ответ дан 28 дек 2016 в 19:32
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаковЕсли Вы хотите именно кнопку, чтобы на неё кликать, то тут без js не обойтись. На чистом CSS можно сделать следующее: по умолчанию задать блоку какую-то строгую высоту и overflow: hidden, а по наведению (hover) менять высоту на auto.
#block < border: 1px solid black; width: 200px; height: 100px; overflow: hidden; padding: 5px 10px; font-size: 14px; >#block:hover
