Home>Article>Web Front-end> How to implement css style beyond hiding

How to implement css style beyond hiding

藏色散人
藏色散人 Original
2021-07-10 11:37:41 6979browse

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;".

How to implement css style beyond hiding

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.

##clip Default, Trim text ellipsis Show ellipsis to represent omitted text string Applies to the given String to represent the trimmed text
Value Description
## Recommended learning: " 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn