CSS換行處理方式

2021-10-14 01:41:42 字數 1667 閱讀 5274

在web頁面上常常可以看到某個元素內部有乙個很長的單詞,元素的寬度不足以容納它。乙個常見的現象就是有乙個很長的url。這會發生什麼呢?這取決於css,那麼css如何控制布局,以及css如何讓文字更合理的方式展示。

比如下圖的一種效果,在web中是很常見的:

由於url文字過長,已經超出容器的寬度,影響了整個視覺效果,甚至很多時候還會影響web頁面的布局效果。

最暴力的做法就是在容器上新增overflow:hidden;,可以阻止文字(或其他任何東西)溢位容器。雖然這可以解決視覺上的效果,但它使文字變得不可訪問。在一些使用滑鼠的桌面瀏覽器中,你可能可以連續三次單擊該行來選擇url並複製它,但是你不能指望每個人都知道,或者在所有場景中都有可能這麼做。

溢位流在這裡也是自確的,因為這就是正在發生的事情。我們使用overflow:auto同樣可以處理溢位流,它會觸發乙個水平滾動條。或許有的場景使用這種方案是合適的,但我想這不是乙個普遍接受的解決方案。

接下來我們來看看怎麼將長文字換行,看看有哪些解決方式,或者更適合的方式。

允許單詞在任何地方被打破(這裡所說的打破是強行折斷換行)。word-break屬性可以「解決」這個問題:

對於我們已經列出的問題,overflow-wrap特性似乎是最有效的解決方案:

p
乍一看,它看起來很像word-break: break-all。在上面的演示中,仔細觀察url,又並不像word-break:break-all一樣,把單詞pen打破pe\n,真正的效果是在pen單詞末尾折斷換行。這樣的處理方式是我們更期待的一種。

hyphens:auto

hyphens屬性做了你可能會想到的事情,比如斷字中新增斷線(-)。連字元有時可以在url和長單詞中使用,但不能保證。舉個例子,乙個很長的數字會把它絆倒。此外,連字元會影響所有文字,更隨意地打破文字,以幫助文字均勻地貼在右邊。

p
我想單詞(「word」)可以幫助你解決這個問題。有些問題是長字串不是「單詞」,所以不能指望它來解決所有的溢位問題。

line-break: anywhere

還有乙個屬性叫做line-break。很明顯,這主要是為了標點符號,但我似乎無法在任何瀏覽器中看到它。@fantasai告訴我,將會有乙個新的屬性值anywhere:

「like word-break: break-all; except it actually breaks everything like a dumb terminal client」。

總結這篇文章主要簡單的介紹了css中幾個處理超常文字溢位容器的處理方式。比如說,單詞被打破折斷換還;還是整個單詞在容器邊緣整體換行;或者說單詞打破,但打**新增連線符-。雖然文章中提到過的幾個屬效能解決我們常見的場景,但對於一些特殊的場景還是要特殊考慮,尤其是長字元(特別是惡意長字元),上面的css屬性估計都無法能解決。

SIGCLD處理方式

apue上sigcld語義寫的有點不清楚,到底我們的系統是如何來處理sigcld訊號呢?1.sig dfl 預設的處理方式是不理會這個訊號,但是也不會丟棄子進行狀態,所以如果不用wait,waitpid 對其子進行進行狀態資訊 會產生殭屍程序。2.sig ign 忽略的處理方式,這個方式和預設的忽略...

遇事處理方式

事,慢慢地說 大事,清楚地說 小事,幽默地說 沒把握的事,謹慎地說 沒發生的事,不要胡說 做不到的事,別亂說 傷害人的事,不能說 討厭的事,對事不對人地說 開心的事,看場合說 傷心的事,不要見人就說 別人的事,小心地說 自己的事,聽聽自己的心怎麼說 現在的事,做了再說 未來的事,未來再說 知人不必言...

故障處理方式

排除故障方法 1 自頂而下法 2 自底而上法 3 分而治之法 4 跟蹤流量路徑法 5 對比配置法 6 元件替換法 大多數採用的工具 ping 測試鏈路連通性 traceroute 測試路由可達性,是否缺少路由 telnet 測試服務埠,是否被拒絕 icmp internet 控制訊息協議 icmp被...