How to implement css style beyond hiding

How to implement beyond hiding using css style: First create an HTML sample file; then set the text beyond hiding effect through "overflow: hidden;text-overflow: ellipsis;".

The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer

#How to achieve beyond hiding in css style?

css style beyond part ellipses

width: 30px;
overflow: hidden;   //隐藏
white-space: nowrap;  //不换行
text-overflow: ellipsis; //超出部分省略号

Definition and Usage:
The white-space attribute sets how to handle whitespace within the element.
Possible values:

Value	Description
normal	By default, blank spaces will be ignored by the browser
pre	Blank spaces will be retained by the browser. It behaves like the pre tag in HTML
nowrap	The text does not wrap, the text continues on the same line until the tag is encountered
pre-wrap	Keep whitespace sequences, but wrap normally
inherit	Specifies that should Inherit the value of the white-space attribute from the parent element

The text-overflow attribute specifies what happens when text overflows the containing element.

##clipDefault, Trim textellipsisShow ellipsis to represent omitted textstringApplies to the given String to represent the trimmed text

Value	Description

css video Tutorial

》

The above is the detailed content of How to implement css style beyond hiding. For more information, please follow other related articles on the PHP Chinese website!