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

Тег details

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

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

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

Пример

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

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

Есть текст который в мобильной версии разворачивается по нажатию иконки + и сворачивается по нажатию — . Я добавил 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; >> 

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: теги и

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

 details < display: inline;/* текст на текущей строке */ > details[open] < display: contents;/* спрятанный текст на текущей строке (в Google Chrome отсутствует реализация на момент написания статьи) */ > details summary < list-style-type: "[. ]";/* такие слова, как «Ещё», «Читать дальше», «Нажать» лучше вносить в list-style-type, чтобы они не были видны в браузерах, не поддерживающих тег details (в Google Chrome отсутствует реализация на момент написания статьи) */ color: blue; cursor: pointer; > details[open] summary Текст 
скрытое/показанное содержимое

В ряде браузеров нельзя сделать inline-элементом

Текст до тега

.

  Текст 
Метка
 скрытое/показанное содержимое
 Текст

Вложенный в тег

Нажать [Закрыть] скрытое/показанное содержимое

 details:not([open]) summary small  display: none; > details[open] summary small 
 Нажать [Закрыть]  скрытое/показанное содержимое
 

  
скрытое/показанное содержимое
 

  
 
Заголовок 1
 
Содержимое 1
  
Заголовок 2
 
Содержимое 2
 
 

 details summary < width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;transition: color .3s; /* плавная смена цвета */ cursor: pointer; /* изменение курсора при наведении */ > details summary:hover, details[open] summary 
Нажать
 скрытое/показанное содержимое
 

  
скрытое/показанное содержимое
 

  
Нажать
 скрытое/показанное содержимое
 

  
Нажать
 скрытое/показанное содержимое
 

 div < position: relative; > details, summary < display: inline; >details[open] < display: contents; >details[open]::after < /* пространство для записи "СВЕРНУТЬ" */ display: block; content: "\00a0"; > summary < color: gray; cursor: pointer; >details[open] summary < position: absolute; /* переместить запись "СВЕРНУТЬ" вниз 
*/ bottom: 0; left: 0; > summary::before < content: "ЕЩЁ"; >details[open] summary::before < content: "СВЕРНУТЬ"; >summary::-webkit-details-marker 
Текст 
скрытое/показанное содержимое
 

 details < display: block; border: 1px solid silver; border-radius: 4px; padding: .5em; >details summary < display: list-item; margin: -.5em; padding: .5em; >details[open] > summary 
Cпрятать спойлер и текст под спойлер
 Текст 
Спрятать текст под спойлер
 Текст