文字不換行 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/dianzi/8q0eg6.html