css顯示省略號,指定換行行數

2021-10-10 19:16:17 字數 838 閱讀 5069

//兩行

width:200px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

word-break: break-all;

line-height: 36.66rpx;

letter-spacing: 3.33rpx;

//一行

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

word-break: break-all;

white-space 屬性

normal

預設。空白會被瀏覽器忽略。

pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。

nowrap

文字不會換行,文字會在在同一行上繼續,直到遇到

標籤為止。

pre-wrap

保留空白符序列,但是正常地進行換行。

pre-line

合併空白符序列,但是保留換行符。

inherit

規定應該從父元素繼承 white-space 屬性的值。

word-break 屬性

normal

使用瀏覽器預設的換行規則。

break-all

允許在單詞內換行。

keep-all

只能在半形空格或連字元處換行。

CSS強制不換行 超出顯示省略號

強制不換行 p 自動換行 p 強制英文單詞斷行 p 注意 設定強制將英文單詞斷行,需要將行內元素設定為塊級元素。超出顯示省略號 pwhite space normal pre nowrap pre wrap pre line inherit white space 屬性設定如何處理元素內的空白 no...

css 強制不換行,自動換行,超出顯示省略號

css 強制不換行,自動換行,超出顯示省略號 強制不換行 white space nowrap 自動換行 word wrap break word 強制英文單詞斷行 word break break all 注意 設定強制將英文單詞斷行,需要將行內元素設定為塊級元素。超出顯示省略號 text ove...

css超過顯示省略號

1 style 2div 8style white space 設定如何處理元素內的空白,所有瀏覽器都支援 normal 預設。空白會被瀏覽器忽略。pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到 標籤為止。pre wrap ...