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
Detailed explanation of JavaScript Reduce
Table of contents map filter some every findIndex...
Improvements to the web server to improve website performance
<br />In the first section of this series, w...
Simple steps to encapsulate components in Vue projects
Table of contents Preface How to encapsulate a To...
Detailed steps to install mysql 8.0.18-winx64 on win10
1. First go to the official website to download t...
The basic principles and detailed usage of viewport
1. Overview of viewport Mobile browsers usually r...
Detailed description of the use of advanced configuration of Firewalld in Linux
IP masquerading and port forwarding Firewalld sup...
Low-version Druid connection pool + MySQL driver 8.0 causes thread blocking and performance limitation
Table of contents Phenomenon Root Cause Analysis ...
Ubuntu 20.04 CUDA & cuDNN Installation Method (Graphical Tutorial)
CUDA installation download cuda Enter the nvidia-...
vue+elementui implements the complete code of adding and modifying a shared bullet box
Table of contents 1. New II. Modification element...
Summary of Form Design Techniques in Web Design
“Inputs should be divided into logical groups so ...
About the role of meta in HTML (collected and sorted from the Internet)
W3Cschool explains it this way The <meta> el...
How to implement DIV's blur function
Use anti-shake to make DIV disappear when the mou...
HTML dl, dt, dd tags to create a table vs. Table creation table
Not only does it reduce the cost of website develo...
4 functions implemented by the transform attribute in CSS3
In CSS3, the transform function can be used to im...
Easyswoole one-click installation script and pagoda installation error
Frequently asked questions When you are new to ea...