CSS控制文字的換行與裁剪

來源:互聯網
上載者:User
這次給大家帶來CSS控制文字的換行與裁剪,CSS控制文字換行與裁剪的注意事項有哪些,下面就是實戰案例,一起來看一下。

關於換行、裁剪的一些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 文本不會換行,文本會在在同一行上,直到遇到 <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;

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

用CSS3實現滑鼠浮動放大圖片

IE8下的nth-child()相容問題如何處理

在CSS邊界線消失如何處理

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.