資訊專欄INFORMATION COLUMN
摘要：，例子與上面一樣，但區別就是它會把整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。代碼結果如圖所示這樣就一目了然了。如果您覺得本文對您的學習有所幫助，請多支持與鼓勵。
一般情況下，元素擁有默認的white-space:normal（自動換行，不換行是white-space:nowrap）,當錄入的文字超過定義的寬度后會自動換行，但當錄入的數據是一堆沒有空格的字符或字母或數字（常規數據應該不會有吧，但有些測試人員是會這樣子做的），超過容器寬度時就會把容器撐大，不換行。
所以解決方法（以IE，chrome,FF為測試瀏覽器）有兩種寫法：
{
word-break:break-all;
word-wrap:break-word;
}
兩種方法的區別說明：
1，word-break:break-all 例如div寬400px，它的內容就會到400px自動換行，如果該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子與上面一樣，但區別就是它會把congratulation整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。
html代碼：
congratulation congratulation congratulation congratulation congratulation congratulationcongratulation congratulation congratulation congratulation congratulation congratulation
結果如圖所示：
這樣就一目了然了。
如果您覺得本文對您的學習有所幫助，請多支持與鼓勵。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111123.html
摘要：理解和的區別從易于區分和理解的角度，我引用了無雙在你真的了解和的區別嗎一文中對兩個屬性作用的解釋屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個css屬性，屬性說明請點擊鏈接查看參考手冊。 white-space wh...
摘要：原文鏈接自動換行問題正常字符的換行是比較合理的而連續的數字和英文字符常常將容器撐大挺讓人頭疼下面介紹的是如何實現換行的方法對于等塊級元素正常文字的換行亞洲文字和非亞洲文字元素擁有默認的當定義的寬度之后自動換行正常文字的換行亞洲文字和非亞洲 原文鏈接：http://blog.csdn.net/ye987987... 自動換行問題,正常字符的換行是比較合理的,而連續的數字和英文字符常常將容...
摘要：原文鏈接自動換行問題正常字符的換行是比較合理的而連續的數字和英文字符常常將容器撐大挺讓人頭疼下面介紹的是如何實現換行的方法對于等塊級元素正常文字的換行亞洲文字和非亞洲文字元素擁有默認的當定義的寬度之后自動換行正常文字的換行亞洲文字和非亞洲 原文鏈接：http://blog.csdn.net/ye987987... 自動換行問題,正常字符的換行是比較合理的,而連續的數字和英文字符常常將容...
摘要：一個長單詞超出整個容器寬度時是否換行必須注意到，這是一個長單詞便超出容器寬度的情況，而且只需考慮英文，中文沒有此特性。規定如何處理內容溢出容器屬性作用于型元素上。 前言 文本方面的CSS內容不少，但只要是用過一下office word來編輯過文章的童鞋都能輕易理解其中的大部分。那么，今天僅僅來談談其中最復雜的部分——文本格式。 處理換行、空格和Tab：white-space 眾所周知，...
閱讀 3807·2023-04-25 19:07
閱讀 3553·2021-11-22 12:02
閱讀 3138·2021-10-12 10:11
閱讀 3907·2021-09-03 10:49
閱讀 2891·2019-08-30 13:21
閱讀 2997·2019-08-30 11:14
閱讀 2088·2019-08-29 15:40
閱讀 2872·2019-08-28 18:29
