Home > Article > Web Front-end > How to implement multi-line ellipses in text in css
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.
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>Result
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>Result
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. |
| 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!