Как свернуть текст в html
Перейти к содержимому

Как свернуть текст в html

  • автор:

Тег details

Тег details создает спойлер на HTML, то есть используется для информации, которую можно скрыть или показать по желанию пользователя.

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

Так же для показа скрытого содержимого можно использовать атрибут open тега details (например, для показа содержимого details с помощью JavaScript).

Пример

Давайте посмотрим, как работает тег details :

Как свернуть развернуть текст на сайте. Скрипт.

�� Создание современных веб сайтов любой сложности. | �� WEB-UKRAINE.COM

Приветствую Вас на страницах нашего сайта. В сегодняшней статье мы будем говорить о возможности сворачивать (скрывать) текст на сайте, а при клике по ссылке показывать полный текст. Очень часто для экономии места на сайте, или же просто для более презентабельного вида, требуется показать пользователю только часть текста, то есть свернуть развернуть текст. Особенно часто я это применяю при разработке интернет магазина в категориях, то есть, если Вам нужно в описании категории свернуть большой текст и развернуть его при клике, показать полное описание, то данная статья именно то что вам нужно. После прочтения данной статьи вы уже будете знать как скрыть часть текста на сайте а при клике на ссылку показать полный текст. Думаю вы так же сталкивались с проблемой когда очень много текста надо скрыть но в то же время дать пользователю возможность прочитать больше, данная статья поможет вам понять главный принцип как скрыть текст в readmore. Скрипт скрывающий большой текст, очень полезная функция а иногда даже необходимая, по этому мы сегодня и будем рассматривать вариант создания скрипта который будет сворачивать текст если он превышает заданную в настройках высоту. То есть если ваш текст будет иметь высоту блока больше чем вы зададите в настройках то будет появляться ссылка при клике на которую будет разворачиваться полный текст описания, в случае если же ваш текст не достигнет заданной в настройках высоты данная ссылка появляться не будет. И так, сам скрипт «скрытый текст под спойлером» и пример его работы вы можете скачать и посмотреть внизу под данной статьей, а в самой статье мы рассмотрим некоторые из его функций и настроек. Функция самого простого вызова скрипта выглядит так:

Свернуть и развернуть текст по нажатию на иконку

Есть текст который в мобильной версии разворачивается по нажатию иконки + и сворачивается по нажатию — . Я добавил 3 точки, но после нажатия на + текст разворачивается и мне нужно чтобы эти 3 точки исчезли, но они остаются. Как это решить? Я добавил класс point и в CSS сделал, но не работает. В чем проблема? Вот HTML:

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. . It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

.read-more-state < display: none; >.read-more-button < display: none; >@media only screen and (max-width: 600px) < .read-more-target < opacity: 0; font-size: 0; transition: .25s ease; >.point < display: none; >.read-more-button < display: block; margin: 1em auto 0; border-radius: 0.25em; width: 1em; height: 1em; background: url(img/arrow%20grad.svg); background-size: cover; cursor: pointer; >.read-more-state:checked + .read-more-target < opacity: 1; font-size: inherit; >.read-more-state:checked ~ .read-more-button < background: url(img/arrow%20up%20grad.svg); background-size: cover; cursor: pointer; >> 

Отслеживать

задан 20 дек 2018 в 16:56

319 1 1 серебряный знак 11 11 бронзовых знаков

1 ответ 1

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

  1. Элемент point по умолчанию должен быть скрыт;
  2. На мобилках делаем его inline ;
  3. Селектором .read-more-state:checked ~ .point скрываем точки, если чекбокс в активном состоянии;
  4. Правим немного разметку, чтобы point был после чекбокса.
.read-more-state < display: none; >.read-more-button < display: none; outline: 1px solid red; >.point < display: none; >@media only screen and (max-width: 600px) < .read-more-target < opacity: 0; font-size: 0; transition: .25s ease; >.point < display: inline; >.read-more-button < display: block; margin: 1em auto 0; border-radius: 0.25em; width: 1em; height: 1em; background: url(img/arrow%20grad.svg); background-size: cover; cursor: pointer; >.read-more-state:checked ~ .read-more-target < opacity: 1; font-size: inherit; >.read-more-state:checked ~ .point < display: none; >.read-more-state:checked ~ .read-more-button < background: url(img/arrow%20up%20grad.svg); background-size: cover; cursor: pointer; >>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. . It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

text-overflow

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

Синтаксис

text-overflow: clip | ellipsis

Значения

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

HTML5 CSS3 IE Cr Op Sa Fx

    text-overflow    

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

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

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

Браузеры

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

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

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