If you want to display extra text as ellipsis in HTML, there are several ways: Single line text: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .box{ width: 200px; background-color: aqua; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style> </head> <body> <div class="box">It's about the sprinkle of peppers. Seeing Scola is about opening. It's about the card machine coming. The time for filing and carding has come. Spread happily home. Spread. Spread. Spread happily home. Spread health</div> </body> </html> Multi-line text: 1. Using the -webkit-line-clamp property .box{ width: 200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border:solid 1px black; } Disadvantages: Only applicable to webkit kernel or mobile pages. It is not supported in browsers such as Firefox and IE. 2. Use pseudo elements to simulate implementation Set a fixed width and height, hide the excess part, and use an element containing an ellipsis (...) at the end to cover part of the content. .box{ height: 200px; width: 200px; position:relative; line-height:1.4em; height:4.2em; overflow:hidden; } .box::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 -20px 1px 45px; background-color:white; } Here, a pseudo-element containing an ellipsis and with a white background color is used to cover part of the content. The height is three times the line-height. Set it to the number of lines you need to display. This approach is relatively simple to implement and has better compatibility.
This is the end of this article about how to convert extra text into ellipsis in HTML. For more information about converting extra text into ellipsis in HTML, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Why web page encoding uses utf-8 instead of gbk or gb2312?
>>: Detailed explanation of CSS pre-compiled languages and their differences
Table of contents introduce Usage scenarios Sourc...
Tomcat defines multiple ClassLoaders internally s...
Preface When scroll events such as scroll and res...
Added anti-crawler policy file: vim /usr/www/serv...
According to major websites and personal habits, ...
Table of contents 1. Add users 2. Change the user...
Table of contents 1. unzip command 1.1 Syntax 1.2...
Panther started as a rookie, and I am still a roo...
During project development, our database data is ...
Table of contents 2. Purpose 2.1 Adding propertie...
Table of contents 1. Easy to read code 1. Unified...
Preface The solution to the problem of not being ...
The image tag is used to display an image in a we...
How to create a Linux virtual machine in VMware a...
Preface The language classification of SQL mainly...