Line feed, text hidden ellipsis, text hidden ellipsis

Line feed, text hidden ellipsis, text hidden ellipsis
1. A line exceeds text hiding

Overflow: hidden;/* hide text automatically */text-overflow: ellipsis;/* Add ellipsis after text hiding */white-space: nowrap;/* force line breaks */

 

2. div displays two lines of text, and the ellipsis (...) is displayed when more than two lines are exceeded.

Overflow: hidden; text-overflow: ellipsis; text-overflow:-o-ellipsis-lastline; display:-webkit-box;-webkit-line-clamp: 2; /* limit the number of rows */-webkit-box-orient: vertical;

 

3. Do not wrap the white-space attribute

Value	Description
Normal	Default value. The blank space is ignored by the browser.
Pre	The blank space is retained by the browser. The behavior is similar to the <pre> label in HTML.
Nowrap	The text will not wrap, and the text will continue on the same line until the <br> label is encountered.
Pre-wrap	The blank character sequence is retained, but the line feed is normal.
Pre-line	Merges the blank character sequence, but retains the line break.
Inherit	Specifies that the value of the white-space attribute should be inherited from the parent element.

 

 

 

 

 

 

 

 

 

4. How to set the word-break attribute to automatically wrap

Value	Description
Normal	Use the default line feed rule of the browser.
Break-all	Line feed is allowed within a word (for long words or URLs)
Keep-all	You can only wrap a line at a halfwidth space or a hyphen.