中英文換不換行,超過給定寬度新增三個點點

2021-08-20 06:37:46 字數 1140 閱讀 6467

word-break:break-all;只對英文起作用,以字母作為換行依據

word-wrap:break-word; 只對英文起作用,以單詞作為換行依據

white-space:pre-wrap; 只對中文起作用,強制換行

white-space:nowrap; 強制不換行,都起作用

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行,超出部分隱藏且以省略號形式出現

white-space值描述

normal

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

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

標籤。

nowrap

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

標籤為止。

pre-wrap

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

pre-line

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

inherit

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

text-overflow

語法: 

text-overflow : clip | ellipsis 

引數: 

clip :  不顯示省略標記(...),而是簡單的裁切

(clip這個引數是不常用的!)

ellipsis :  當物件內文字溢位時顯示省略標記(...)

word-break

描述normal

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

break-all

允許在單詞內換行。

keep-all

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

overflow值描述

visible

預設值。內容不會被修剪,會呈現在元素框之外。

hidden

內容會被修剪,並且其餘內容是不可見的。

scroll

內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。

auto

如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。

inherit

規定應該從父元素繼承 overflow 屬性的值。

CSS強制中英文換行與不換行 強制英文換行示例

1.word break break all 只對英文起作用,以字母作為換行依據 2.word wrap break word 只對英文起作用,以單詞作為換行依據 3.white space puolwure wrap 只對中文起作用,強制換行 4.white space nowrap 強制不換行程...

CSS中英文換行問題

1.word break break all 只對英文起作用,以字母作為換行依據 2.word wrap break word 只對英文起作用,以單詞作為換行依據 3.white space pre wrap 只對中文起作用,強制換行 4.white space nowrap 強制不換行,都起作用 ...

CSS中英文換行問題

word break break all 只對英文起作用,以字母作為換行依據 word wrap break word 只對英文起作用,以單詞作為換行依據 white space pre wrap 只對中文起作用,強制換行 white space nowrap 強制不換行,都起作用 white sp...