数据结构
网络
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 次浏览
广告