How to convert extra text into ellipsis in HTML

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.

Note: If you want to be compatible with IE6 or 7, you cannot use pseudo-elements. You can use a <div> or <span> tag. If you want to support IE8, you need to write ::after as :after.

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

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...

Use of MySQL DDL statements

Preface The language classification of SQL mainly...