How to convert extra text into ellipsis in HTML
|
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
Recommend
Usage scenarios and source code analysis of Vue advanced components functional components
Table of contents introduce Usage scenarios Sourc...
Tomcat class loader implementation method and example code
Tomcat defines multiple ClassLoaders internally s...
Specific use of CSS front-end page rendering optimization attribute will-change
Preface When scroll events such as scroll and res...
Nginx anti-crawler strategy to prevent UA from crawling websites
Added anti-crawler policy file: vim /usr/www/serv...
Share the problem of Ubuntu 19 not being able to install docker source
According to major websites and personal habits, ...
MySQL database terminal - common operation command codes
Table of contents 1. Add users 2. Change the user...
Detailed explanation of Linux command unzip
Table of contents 1. unzip command 1.1 Syntax 1.2...
CentOS 7.2 builds nginx web server to deploy uniapp project
Panther started as a rookie, and I am still a roo...
Summary of MySQL database and table sharding
During project development, our database data is ...
Detailed explanation of the usage of Object.assign() in ES6
Table of contents 2. Purpose 2.1 Adding propertie...
How to write high-quality JavaScript code
Table of contents 1. Easy to read code 1. Unified...
The solution record of Vue failing to obtain the element for the first time
Preface The solution to the problem of not being ...
Detailed explanation of the basic usage of the img image tag in HTML/XHTML
The image tag is used to display an image in a we...
VMware's detailed tutorial on how to create a Linux virtual machine and set up a virtual machine network
How to create a Linux virtual machine in VMware a...
Use of MySQL DDL statements
Preface The language classification of SQL mainly...