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

Example code for using Nginx to implement 301 redirect to https root domain name

How to convert extra text into ellipsis in HTML

Example code for using Nginx to implement 301 redirect to https root domain name

Analysis of the difference between placing on and where in MySQL query conditions

Detailed explanation of basic interaction of javascript

Native JS to implement sharing sidebar

mysql5.7 create user authorization delete user revoke authorization

Have you really learned MySQL connection query?

Upgrade Docker version of MySQL 5.7 to MySQL 8.0.13, data migration

Implementation of React star rating component

Nginx configuration PC site mobile site separation to achieve redirection

Mysql query database capacity method steps

Recommend

Ubuntu 16.04 installation tutorial under VMware 12

How to configure tomcat server for eclipse and IDEA

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

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

Introduction to CSS style introduction methods and their advantages and disadvantages

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

Detailed explanation of the application of Docker underlying technology Namespace Cgroup

Detailed explanation of JavaScript's Set data structure

Three principles of efficient navigation design that web designers must know

Description and use of table attributes CellPad, CellSpace and Border in web page production

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

Explanation on whether to choose paging or loading in interactive design

HTML sub tag and sup tag

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

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