CSS word-break屬性用法及代碼示例

此 CSS 屬性指定單詞在行尾應如何中斷。它定義了換行規則。使用此屬性，不適合內容框的線條將在某個點斷開。

用法

word-break:normal |keep-all |  break-all | inherit ;

該屬性的默認值是 normal。因此，當我們不指定任何值時，它會自動使用。

值

keep-all：它以默認樣式打破單詞。它不應用於日文/中文/韓文 (CJK) 文本。

break-all：在字符之間插入word-break，防止單詞溢出。應用此值後，瀏覽器將在任何點斷行。如果它太長而無法容納並位於行尾，則它可以從中間斷開單詞。它不適用連字符。

initial:它將屬性設置為其默認值。

inherit:它從其父元素繼承屬性。

示例

在這個例子中，有三個容器。我們對第一個容器的內容應用正常值，對第二個容器的內容應用 break-all 值，對第三個容器的內容應用 keep-all 值。

<!DOCTYPE html>
<html>
<head>
<style>
p{
width:350px;
border:2px solid black;
text-align:left;
font-size:20px;
color:blue;
}
.jtp{
word-break:normal;
}
.jtp1{
word-break:break-all;
}
.jtp2{
word-break:keep-all;
}
</style>
</head>
<center>
<body>
<h2>word-break:normal;</h2>
<p class="jtp">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2>word-break:break-all;</h2>
<p class="jtp1">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2>word-break:keep-all;</h2>
<p class="jtp2">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</center>
</body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS word-break property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。