強制中英文換行及超出顯示省略號的問題

2021-08-28 14:36:52 字數 584 閱讀 9179

當固定盒子的寬度時,中文會換行,但是英文和數字不換行,解決的方法如下:

1.  強制英文換行(二選一)

word-break: break-all;

word-wrap: break-word;

2. 強制中文換行 只對中文有作用

white-space: pre-wrap;

3. 強制不換行 中英文都有作用

white-space: nowrap;

4. 超出不換行,超出部分隱藏且以省略號形式出現(部分瀏覽器支援)中英文都有作用

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

5. 超出兩行換行

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

width: 550rpx;

line-height: 40rpx;

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...

內容超出用省略號顯示 或換行

overflow hidden text overflow ellipsis white space nowrap 一定要一起用 一定要給容器定義寬度.如果少了overflow hidden 文字會橫向撐到容易的外面 如果少了white space nowrap 文字會把容器的高度往下撐 即使你定義...