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

Ubuntu 16.04 installation tutorial under VMware 12

This article shares with you the installation tut...

How to configure tomcat server for eclipse and IDEA

tomcat server configuration When everyone is lear...

New ways to play with CSS fonts: implementation of colored fonts

What if you designers want to use the font below ...

Detailed explanation of the use of Vue Smooth DnD, a draggable component of Vue

Table of contents Introduction and Demo API: Cont...

Example of implementing text wrapping in html (mixed text and images in html)

1. Text around the image If we use the normal one...

Detailed explanation of JavaScript's Set data structure

Table of contents 1. What is Set 2. Set Construct...

Three principles of efficient navigation design that web designers must know

Designing navigation for a website is like laying...

Summary of the pitfalls of using primary keys and rowids in MySQL

Preface We may have heard of the concept of rowid...

Explanation on whether to choose paging or loading in interactive design

The author of this article @子木yoyo posted it on hi...

HTML sub tag and sup tag

Today I will introduce two HTML tags that I don’t...

(MariaDB) Comprehensive explanation of MySQL data types and storage mechanisms

1.1 Data Type Overview The data type is a field c...

MySQL 8.0.21 installation tutorial under Windows system (illustration and text)

Installation suggestion : Try not to use .exe for...