文字不換行 css
- IT科技
- 關注:4.4K次
css中怎麼使文字不換行呢?不知道的小夥伴來看看小編今天的分享吧!
css中使文字不換行,輸入代碼:
white-space: nowrap;
normal:默認。空白會被瀏覽器忽略。
pre:空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。
nowrap:文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標籤為止。
pre-wrap:保留空白符序列,但是正常地進行換行。
pre-line:合併空白符序列,但是保留換行符。
inherit:規定應該從父元素繼承 white-space 屬性的值。
拓展資料:
1、允許長單詞換行
word-wrap:break-word;
normal: 只在允許的斷字點換行(瀏覽器保持默認處理)。
break-word: 在長單詞或 URL 地址內部進行換行。
2、換行不截斷單詞
word-break:break-all;
normal: 使用瀏覽器默認的換行規則。
break-all: 允許在單詞內換行。
keep-all: 只能在半角空格或連字符處換行。
3、單行文字超出顯示省略號
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
4、多行文字超出顯示省略號
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
5、大換行有隔絕距離花式
可以應用CSS配置寬度自動換行。咱們可以在一個div裏,添加一個div並參預css花樣,對退出的div設置對應的css寬度就可實現自行換行。
6、換行與不換行知識填補
CSS設置不轉行CSS屬性標籤:
overflow:hidden 暗藏——css 竄伏
white-space:normal 默許
pre 換行與別的空白字符都將遭到眷注。
nowrap 勒迫在對抗行內表示全數文本,直到文本完結能夠遭逢 br 對象。
設置裝備擺設強行換行CSS屬性標籤。
word-break:
normal ; 依照亞洲説話和非亞洲語言的文本劃定,核准在字內換行。
break-all : 該行為與亞洲措辭的normal類似。也同意非亞洲語言文本行的任意字內斷開。該值恰當囊括一些非亞洲文本的亞洲文本。
keep-all : 與全體非亞洲説話的normal雷同。關於中文,韓文,日文,不許可字斷開。適合徵求多量亞洲文本的非亞洲文本。
- 文章版權屬於文章作者所有,轉載請註明 https://shqsg.com/zh-mo/dianzi/8q0eg6.html