Show more css text

Многострочный усеченный текст с кнопкой «Показать больше» на чистом CSS

Я написал скрипт на CSS для размещения многострочного усеченного текста с кнопкой «Читать далее».

Я задался вопросом, позволяет ли CSS правильно оформить усеченный текст так, чтобы разместить в нем несколько строк? А также по нажатию кнопки «Показать больше» отобразить текст полностью.

Свойство text-overflow: ellipsis не поддерживает многострочность. Но я вспомнил о свойстве line-clamp , которое позволяет обрезать многострочный текст.

Подробнее о кнопке «Показать больше»

Для создания кнопки «Показать больше» я не мог использовать тег или . Для этого требуется label и чекбокс. Вот что получилось:

 
 
Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.
 read more 

Я разместил чекбокс прямо перед абзацем, поэтому можно использовать псевдокласс :checked для активации усечения текста:

Нажмите кнопку, и в абзаце отобразится обрезанная версия текста.

Но как насчет доступности?

Хак с чекбоксом не только семантически неправильный, но и ограничивает возможности доступа к функционалу для людей с плохим зрением. При этом присваивается для чекбокса свойство display: none. Из-за этого нарушается навигация с помощью клавиатуры. Нельзя использовать скрытый чек-бокс , а использование метки не помогает. Событие нажатия клавиши пробела/ввода не перенаправляют событие в чекбокс.

Чтобы решить эту проблему, я сделал чекбокс фокусируемым, хоть и все еще невидимым.

Теперь чекбокс можно выделить, но без скринридера нельзя узнать, установлен он или нет, так как невидим. Чтобы решить эту проблему, я заставил label наследовать стиль фокуса браузера по умолчанию, когда чекбокс выделен:

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

Как отображать кнопку динамически?

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

.read-more < display: none; >p:truncated + .read-more

Поэтому реализовать это можно только с помощью JavaScript. Например:

const ps = document.querySelectorAll('p'); const observer = new ResizeObserver(entries => < for (let entry of entries) < entry.target.classList[entry.target.scrollHeight >entry.contentRect.height ? 'add' : 'remove']('truncated'); > >); ps.forEach(p => < observer.observe(p); >);

А вот расширенная демо-версия:

Источник

CSS show more/Less text with just HTML and JavaScript

The following tutorial shows you how to use CSS to do «CSS show more/Less text with just HTML and JavaScript».

CSS Style

The CSS style to do «CSS show more/Less text with just HTML and JavaScript» is

#textarea !-- w w w . d e m o 2 s. c o m--> display:none; > #textarea:target < display:block; > #textarea + ul.controls < list-style-type:none; > #textarea + ul.controls .hide, #textarea:target + ul.controls .show < display:none; > #textarea:target + ul.controls .hide, #textarea + ul.controls .show < display:inline-block; >

HTML Body

body> Lorem ipsum dolor sit amet p id="textarea"> All that delicious text is in here! ul >"controls"> li >"show">a href="#textarea">Show  li >"hide">a href="#">Hide   p>Here is some more text  

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> #textarea < display: none; > #textarea:target < display: block; > #textarea + ul.controls < list-style-type: none; > #textarea + ul.controls .hide, #textarea:target + ul.controls .show < display: none; > #textarea:target + ul.controls .hide, #textarea + ul.controls .show < display: inline-block; > !-- w w w . d e m o 2s . c o m -->   body> Lorem ipsum dolor sit amet p id="textarea"> All that delicious text is in here! ul >"controls"> li >"show">a href="#textarea">Show  li >"hide">a href="#">Hide   p>Here is some more text   

Related

• CSS show/hide fading text css only
• CSS Show/Hide Text with CSS
• CSS show HTML as plain text
• CSS show more/Less text with just HTML and JavaScript
• CSS show more/Less text with just HTML and JavaScript (Demo 2)
• CSS Show text in the top-right corner, like in docs
• CSS Show text in the top-right corner, like in docs (Demo 2)

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

How to make read more option with html/CSS?

I have in some div long text and I would like to display only 3 lines from the text and when somebody click on the «read more», the whole text should be shown. How to make this «read more» option in html/css?

3 Answers 3

One method would be to set the div’s height to be three times its line-height , and set overflow: hidden .

You can then change its height to «auto» in the event handler for displaying the rest of the content:

document.querySelector('button').addEventListener('click', function() < document.querySelector('#content').style.height= 'auto'; this.style.display= 'none'; >); 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 Read more

You could also do this completely in CSS by using an adjacent sibling selector:

body < font: 14px verdana; >#content < overflow: hidden; height: 3.6em; line-height: 1.2em; width: 200px; >#more:checked + div

 Read more 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

You can do this by first setting the height of the box to a specific size and keep the overflow hidden. Then use a button and js event to handle this .

 
your test will come here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Read more 
 

Your css file should contain this.

I was looking for read-more-possibility made only by html and css, too. The best idea for me was that with the adjacent sibling selector. I changed what you read above in a certain way. First there is normal text. That stops at a senseful point, not counting the lines. Sometimes it can be one line, sometimes 4. After that I can expand it. In css I wrote the first part, the second in html

body < font: 20px verdana; >.content < overflow: hidden; height: 0em; line-height: 1.2em; width: 100%; >.more:checked + div

 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Read more? Click at the box.  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

Источник

Multiline truncated text with «show more» button (with just CSS)

The other day, truncated text came up during a discussion in the office, and I since wondered if CSS has come far enough to be able to do truncated text right, that is, supporting the following:

text-overflow: ellipsis does not support multiple lines, but I remembered the line-clamp property that can be used to achieve multiline truncated text. And luckily, CSS Tricks has a nice working demo, plus browser support is fairly decent now. Cool!

What about that expand button though?

Creating the «show more» button requires some outside-the-box CSS hackery. I couldn’t use a or tag, as this is a job for the infamous checkbox hack, and that required a label element and an accompanying. checkbox! So I ended up with the following markup:

 
 
Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.
 read more 

Since I put the checkbox right before the paragraph, I could now use the :checked pseudo class to toggle truncation, like so:

And indeed, this did exactly what I wanted: Click the button, and the paragraph toggles between truncated and not truncated. Sweet.

But..but. but it’s a hack, what about a11y??

Indeed, the checkbox hack isn’t only hacky and semantically problematic, it’s also not very accessible, as most just naively display: none the checkbox. That results in broken keyboard navigation, as you cannot tab into a hidden the checkbox, and tabbing into the label doesn’t help, as the space/enter keys don’t forward the event to the checkbox like the click event does (this makes sense, as on a typical form, you would tab into the checkbox instead of the label).

I want my examples and demos to be as accessible as possible, so to solve for this, I first made the checkbox focusable/tabbable while still invisible, like so:

The only remaining issue was that I could now tab into the checkbox, but I had no way of knowing, without a screenreader, whether the checkbox is focused or not as. well. it’s invisible. To solve for this, I made the label receive a (roughly) browser-default focus styling when in fact the checkbox is focused:

Check out the combined demo, try clicking the button and try tabbing to it with your keyboard and hit the space key!

What if I don’t know whether the text gets truncated or not? How do I show the button dynamically?

I tried was to find out what I can do to either show the button dynamically when the arbitrary text in the paragraph is too long to fit into the box, and hide it otherwise. Unfortunately, that’s the one feature I just couldn’t do with CSS, because it requires a :truncated selector, so that we could do something like this:

.read-more < display: none; >p:truncated + .read-more

Turns out others had the same idea, but the discussion from 2014 didn’t go anywhere. Boo! If you really need that feature, consider using JS for this until browser support comes around, like so:

const ps = document.querySelectorAll('p'); const observer = new ResizeObserver(entries => < for (let entry of entries) < entry.target.classList[entry.target.scrollHeight >entry.contentRect.height ? 'add' : 'remove']('truncated'); > >); ps.forEach(p => < observer.observe(p); >);

And here’s the expanded demo with the JS helper and a resizing box (open in Codepen and resize the browser window to see the behavior):

Источник