Как сделать кнопку читать далее в html
Для создания кнопки "Читать далее" в HTML можно использовать тег <a> с атрибутом href , указывающим на страницу с полной версией материала. Для того чтобы кнопка выглядела как кнопка, а не как обычная ссылка, необходимо использовать CSS.
Где full_article.html — это страница с полной версией материала, а read-more — это класс, который можно добавить в CSS для стилизации кнопки.
Где display: inline-block задает тип элемента (в данном случае кнопка), padding задает отступы внутри кнопки, background-color задает цвет фона, color задает цвет текста, text-decoration: none убирает подчеркивание при наведении на кнопку, border-radius задает скругление углов, font-size задает размер шрифта, а transition задает плавное изменение цвета фона при наведении на кнопку.
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:
You could also do this completely in CSS by using an adjacent sibling selector:
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 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
-
The Overflow Blog
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.5.24.43458
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
How TO — Read More Read Less Button
Learn how to create a «read more — read less» button with JavaScript.
Example Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel . erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
Read More Read Less Button
Step 1) Add HTML:
Example
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>