CSS實現強制換行 Day 78

2021-06-23 00:24:57 字數 1660 閱讀 3248

其實最早的時候也考慮過這個問題,當時還在想需要判定文字的長度麼,實在是傻到極點了,原來css中本來就有這個樣式設定的。而今天正好看到了有這麼一篇介紹,仔細看了下,感覺還不錯,這裡也把實驗的結果記錄下。

初始階段:

comedycookidespitelovedescriptiondescription

四大四大四大阿艾弗森的法師打發第三方聖達達菲的馮紹峰打算打

這時的效果是什麼呢,我們來看下:

這樣我們可以看出,如果是英文本元的話,就會超出div的邊界了,而漢字倒不會

解決辦法:

有兩個樣式設定是可以解決這個問題的,分別是word-wrapworld-break

先來看第一種word-wrap:break-word;的實現效果

1、加入英文語句時,如果加入後乙個單詞會超出div範圍,則將整個單詞進行換行;

2、如果單詞過長,但是同乙個單詞,它會進行斷開換行;

world-break則有兩種方式,分別來看:

i comedycookidespitelovedescriptiondescription

四大 四大四大阿艾弗 森的法師打發第三方聖達達菲的馮紹峰打算打

效果為:

1、後乙個單詞加入後可能超出div邊界,先加入詞填滿div的寬度,超出的單詞部分剩餘的字母轉入下一行;

2、乙個單詞超出的話就更不用說了,肯定會填滿寬度再轉入下一行唄。再來看第二種:

i comedycookidespitelovedescriptiondescription

四大 四大四大阿艾弗 森的法師打發第三方聖達達菲的馮紹峰打算打

這種的效果又該如何呢,我們先來看下好了:

1、如果加入下一次後可能會超出邊界,那就將整個的下乙個次換行;

2、單獨的乙個單詞的話,會保持單詞的完整性,從而仍然可能會造成超出邊界的情況

而第一種同樣可以實現換行效果,在單個單詞長度都不長的情況下比較適用,word-wrap:break-word;

而第三種情況word-break:keep-all與第一種情況相似,卻又不同,如果存在過長單詞的話是無法實現效果的,所以不贊成使用來實現效果

就這樣又學到了點東西,心情不錯,開森..

Day 78 初始驅動

pragma pack 1 dev 目錄下存放 裝置節點 sys 目錄下存放 所有的裝置檔案 proc 目錄下存放 所有的核心 動態載入模組 insmod hello.ko 動態解除安裝模組 rmmod hello 2.linux下裝置的分類 字元裝置 塊裝置 網路裝置 3.編寫驅動時如何區分裝置的...

css實現強制不換行 自動換行 強制換行

強制不換行 div自動換行 div強制英文單詞斷行 divcss設定不轉行 overflow hidden 隱藏 white space normal 預設 pre 換行和其他空白字元都將受到保護 nowrap 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件 設定強行換行 word b...

css實現強制不換行 自動換行 強制換行

強制不換行 div 自動換行 div 強制英文單詞斷行 div css設定不轉行 overflow hidden 隱藏 white space normal 預設 pre 換行和其他空白字元都將受到保護 nowrap 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件 設定強行換行 wor...