資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會研究
時尚研究
法律研究使用 CSS3 指定單詞分隔規則
若要在 CSS3 中指定單詞分隔規則，請使用 word-break 屬性。此屬性用於換行。我們來看看語法 −
word-break: value;
這些值包括
normal − 預設換行規則。
break-all − 如果僅當出現溢位時才會在任何字元處分隔單詞
break-word − 在任意點分隔單詞以防止溢位
以下是用 CSS3 指定單詞分隔規則的程式碼 −
普通單詞分隔規則
普通單詞分隔規則是預設規則 −
word-break: normal;
示例
我們來看看這個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 50px;
border: 3px solid #3008c0;
margin: 10px;
padding: 10px;
font-size: 18px;
display: inline-block;
margin-right: 20px;
word-break: normal;
}
</style>
</head>
<body>
<h1>The normal Word Breaking Rules Example</h1>
<br />
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</body>
</html>
break-all 單詞分隔規則
使用 word-break 屬性的 break-all 值，僅當出現溢位時才會在任何字元處分隔單詞 −
word-break: break-all;
示例
我們來看看這個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 50px;
border: 3px solid #3008c0;
margin: 10px;
padding: 10px;
font-size: 18px;
display: inline-block;
margin-right: 20px;
word-break: break-all;
}
</style>
</head>
<body>
<h1>The break-all Word Breaking Rules Example</h1>
<br />
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</body>
</html>
break-word 單詞分隔規則
使用 word-break 屬性的 break-word 值，在任意點分隔單詞以防止溢位 −
word-break: break-word;
示例
我們來看看這個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 50px;
border: 3px solid #3008c0;
margin: 10px;
padding: 10px;
font-size: 18px;
display: inline-block;
margin-right: 20px;
word-break: break-word;
}
</style>
</head>
<body>
<h1>The break-word Word Breaking Rules Example</h1>
<br />
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</body>
</html>
更新於: 2023 年 12 月 27 日
149 次瀏覽
廣告