CSS的word-break 屬性

時間 2019-11-11

標籤 css word break 屬性欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1
{
width:150px; 
border:1px solid #000000;

}

p.test2
{
width:150px; 
border:1px solid #000000;

}
</style>
</head>
<body>

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p><b>註釋：</b>目前 Opera 不支持 word-break 屬性。</p>

</body>
</html>

因爲文字超過了p標籤的寬度，因此就會發生換行，那麼運行的結果是這樣的：html

瀏覽器會自動的爲文字換行，要控制這個換行，就要使用word-break屬性瀏覽器

word-break:normal;就是使用瀏覽器自帶的換行屬性spa

若是是word-break屬性爲break-all的時候，就是隻要碰到了內容的最大長度就換行，不論是不是一個單詞：
code

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1
{
width:150px; 
border:1px solid #000000;
word-break:break-all;
}


</style>
</head>
<body>

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p><b>註釋：</b>目前 Opera 不支持 word-break 屬性。</p>

</body>
</html>

運行的結果：orm

long這個單詞就被分開了very這個單詞也被分開了htm

而是用keep-all只能在半角空格或連字符處換行。，因爲只容許在空格換行，運行的結果就是：class

1. CSS content 屬性 CSS counter-increment 屬性 CSS counter-reset 屬性
2. CSS position屬性、float屬性
3. css的position屬性
4. css的background屬性
5. css的postion屬性
6. CSS 的 appearance 屬性
7. css的direction屬性
8. CSS的display屬性
9. CSS的zoom屬性
10. CSS屬性中的display屬性淺談；
更多相關文章...
• W3C CSS 活動 - W3C 教程
• CSS 指南 - 網站建設指南
• 互聯網組織的未來：剖析GitHub員工的任性之源
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。