關(guān)于換行、裁剪的一些CSS屬性
word-wrap: normal | break-word
normal 正常換行,內(nèi)容可以撐破容器,例如長(zhǎng)單詞或者長(zhǎng)數(shù)字的情況
break-word 以單詞作為換行依據(jù),如果需要,單詞內(nèi)部允許斷行
word-break: normal | break-all | keep-all
normal 正常換行,內(nèi)容可以撐破容器,例如長(zhǎng)單詞或者長(zhǎng)數(shù)字的情況
break-all 以字母作為換行依據(jù)
keep-all 中英文下和normal相同
white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit
normal默認(rèn)值,空白會(huì)被瀏覽器忽略
pre 空白會(huì)被瀏覽器保留,其行為方式類似 HTML 中的 <pre> 標(biāo)簽
nowrap 文本不會(huì)換行,文本會(huì)在在同一行上,直到遇到 <br /> 標(biāo)簽為止
pre-wrap 保留空白符序列,但是正常地進(jìn)行換行(IE7-不支持)
pre-line 合并空白符序列,但保留換行符(IE7-不支持)
inherit規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值(IE不支持)
應(yīng)用:
文字溢出顯示省略標(biāo)記(...):
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
文字換行:
/* 以單詞作為換行依據(jù) */
word-wrap: break-word;
word-break: normal;
/* 以字母作為換行依據(jù) */
word-break: break-all;
文字強(qiáng)制不換行:
white-space: nowrap;
以上所述是小編給大家介紹的CSS控制文字換行、裁剪,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選