How to hide three points in css

How to hide three dots in css: 1. In the case of a single line, the text overflow can be displayed as three dots through the css attribute "text-overflow: ellipsis;"; 2. In the case of multiple lines, This can be achieved through the attributes "overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;".

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to achieve three-point hiding in css?

css text overflow is hidden as three dots...

(1)Single line

white-space: nowrap;//不换行
text-overflow: ellipsis;//将文本溢出显示为（…）
overflow: hidden;//溢出隐藏。

(2)Multiple lines

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Note: text The -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;

Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

Value

clip to cut the text.

ellipsis Displays the ellipsis symbol ... to represent trimmed text.

string Use the given string to represent the trimmed text.

initial is set to the property default value.

inherit Inherits this attribute value from the parent element.

Recommended learning: "css video tutorial"

The above is the detailed content of How to hide three points in css. For more information, please follow other related articles on the PHP Chinese website!