CSS several line breaking methods, text beyond hidden and line breaking methods within words

Several line breaks in CSS

1. Automatic line break:

word-wrap: break-word;
word-break: normal;

2. Force no newline:

white-space:nowrap;

3. Forced newline:

word-break:break-all;
word-wrap:break-word;  

Text beyond is hidden using an ellipsis (…)

1. A single line exceeds the display...

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2. Multiple lines exceed the display...

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;  //控制显示几行
-webkit-box-orient: vertical;   //webbox方向

Specifies how to break lines within words

The CSS property word-break specifies how to break lines within words.

word-break : normal | break-all | keep-all

normal:使用浏览器默认的换行规则。

break-all:可在任意字符间断行。

keep-all:文本不断行,只能在半角空格或连字符处换行。

Guess you like

Origin blog.csdn.net/weixin_44646763/article/details/128498783