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