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
This article shares with you the installation tut...
tomcat server configuration When everyone is lear...
What if you designers want to use the font below ...
Table of contents Introduction and Demo API: Cont...
Three ways to introduce CSS 1. Inline styles Adva...
1. Text around the image If we use the normal one...
Docker underlying technology: The two core techno...
Table of contents 1. What is Set 2. Set Construct...
Designing navigation for a website is like laying...
cellspacing is the distance between cells in the t...
Preface We may have heard of the concept of rowid...
The author of this article @子木yoyo posted it on hi...
Today I will introduce two HTML tags that I don’t...
1.1 Data Type Overview The data type is a field c...
Installation suggestion : Try not to use .exe for...