CSS操纵文本换行、剪裁

2021-01-20 05:16 jianzhan

有关换行、剪裁的1些CSS特性

word-wrap: normal | break-word

normal 一切正常换行,內容能够撑破器皿,比如长单词或长数据的状况
break-word 以单词做为换行根据,假如必须,单词內部容许断行

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

normal 一切正常换行,內容能够撑破器皿,比如长单词或长数据的状况

break-all 以字母做为换行根据

keep-all 中英文下和normal同样

white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit

normal默认设置值,空白会被访问器忽视

pre 空白会被访问器保存,其个人行为方法相近 HTML 中的 <pre> 标识

nowrap 文字不容易换行,文字会在在同1行上,直至遇到 <br /> 标识为止

pre-wrap 保存空白符编码序列,可是一切正常地开展换行(IE7-不适用)

pre-line 合拼空白符编码序列,但保存换行符(IE7-不适用)

inherit要求应当从父元素承继 white-space 特性的值(IE不适用)

运用:

文本外溢显示信息省略标识(...):

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

文本换行:

/* 以单词做为换行根据 */ 
word-wrap: break-word; 
word-break: normal; 
/* 以字母做为换行根据 */ 
word-break: break-all; 

文本强制性不换行:

white-space: nowrap; 

以上所述是网编给大伙儿详细介绍的CSS操纵文本换行、剪裁,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!