How to implement multi-line ellipses in text in css-CSS Tutorial-php.cn

How to implement multi-line ellipses in text in css

coldplay.xixi

Release： 2023-02-16 18:43:11

Original

28682 people have browsed it

How to implement multi-line ellipses in text using css: 1. Add the "display: -webkit-box;" style to the text element; 2. Add the "-webkit-box-orient: vertical;" style to the text element ;3. Add the "-webkit-line-clamp: 3;" style setting to the text element to display a few lines of text; 4. Add the "overflow: hidden;" style setting to the text element to display an ellipsis if the number of lines exceeds the specified number.

How to implement multi-line ellipses in text in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to implement multi-line ellipses in css:

If you want to implement overflow display of ellipsis in a single line of text, students should all know to use text-overflow:ellipsis attribute, of course you also need to add the widthwidth attribute to be compatible with some browsing.

Realize single-line text omission

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin:0 auto ;
                width:300px;
                color: red;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>
    </body>
</html>

Copy after login

Result

How to implement multi-line ellipses in text in css

Realize multi-line text omission

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin: 0 auto;
                width: 300px;
                color: red;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>
    </body>
</html>

Copy after login

Result

How to implement multi-line ellipses in text in css

Related attribute description

CSS text- overflow attribute

The text-overflow attribute specifies how text should be displayed when it overflows the element that contains it. After overflow, you can set the text to be cut, to display an ellipsis (...), or to display a custom string (not supported by all browsers).

text-overflow needs to be used with the following two attributes:

white-space: nowrap;
overflow: hidden ;

Usable attribute values:

Value	Description
clip	Cut text.
ellipsis	Display ellipsis symbols ... to represent trimmed text.
string	Use the given string to represent the trimmed text.
initial	is set to the property default value.
inherit	Inherit this attribute value from the parent element.

CSS white-space attribute

The white-space attribute specifies how to handle whitespace within the element.

Value	Description
normal	Default. White space is ignored by the browser.
pre	Blank spaces will be retained by the browser. It behaves like the tag in HTML. Copy after login
nowrap	The text will not wrap, the text will continue on the same line until the tag is encountered.
pre-wrap	Preserves whitespace sequences, but wraps normally.
pre-line	Combines whitespace sequences, but retains newlines.
inherit	Specifies that the value of the white-space attribute should be inherited from the parent element.

CSS overflow property

The overflow property specifies what happens if content overflows an element's box.

Value	Description
visible	Default value. The content will not be trimmed and will be rendered outside the element box.
hidden	The content will be trimmed and the remaining content will be invisible.
scroll	The content will be trimmed, but the browser will display scroll bars to view the remaining content.
auto	If content is trimmed, the browser displays scroll bars to view the remaining content.
inherit	Specifies that the value of the overflow attribute should be inherited from the parent element.

Related tutorial recommendations: CSS video tutorial

The above is the detailed content of How to implement multi-line ellipses in text in css. For more information, please follow other related articles on the PHP Chinese website!