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.
| Value | Description |
|---|---|
| Default, Trim text | |
| Show ellipsis to represent omitted text | |
| Applies to the given String to represent the trimmed text |
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
