CSS hypens属性控制当文本太长而无法放在一行中时，单词如何分解为行。此属性可用于提高跨多行换行的文本的可读性。
该属性仅适用于块级元素。
以下是可用于属性连字符的所有可能值：
- none −不允许使用连字符。
- manual −它指定了基于 WebKit 的浏览器中文本的手动断字行为。
- auto −允许在适当的断字点使用断字，具体由浏览器确定。
- initial -初始值，即手动值。
- inherit -从父元素继承的值。
CSS hypens - none 值
Hyphens： none 属性值可防止单词连字符。它不会被分成几行，即使它们太长而无法放在一行上。
<html>
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-none {
hyphens: none;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-none">It is a long established Contrary to popularised.</p>
</div >
</body>
</html>
CSS hypens - manual 值
使用 CSS hyphens： manual 属性时，仅允许在用户显式插入连字符的位置使用连字符。这是默认值。
<html>
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-manual {
hyphens: manual;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-manual">It is a long establ-ished Contrary to popula-rised.</p>
</div >
</body>
</html>
CSS hypens - auto 值
您可以使用 CSS hyphens： auto 属性让浏览器根据语言的连字符规则，在认为合适的点自动连字符单词。
<html>
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-auto {
hyphens: auto;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-auto">It is a long established Contrary to popularised.</p>
</div>
</body>
</html>
CSS hypens - initial 值
CSS 的 hypens ：initial 属性将连字符属性设置为其初始值。hyphens 属性的初始值为 manual，这意味着仅在用户显式插入连字符的点允许使用连字符。
<html>
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-initial {
hyphens: initial;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-initial">It is a long establ-ished Contrary to popu-larised.</p>
</div >
</body>
</html>
CSS hypens - inherit 值
使用 hyphens： inherit 属性时，连字符属性的值继承自父元素。元素的连字符将与其父元素的连字符相同。
<html lang="en">
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
padding: 2px;
hyphens: auto;
}
.hyphenated-inherit {
border: 2px solid #ac3f08;
background-color: #f05e40;
hyphens: inherit;
}
</style>
</head>
<body>
<div class="container">
There are many variations of embarrassing of Lorem Ipsum.
<p class="hyphenated-inherit">It is a long establ-ished Contrary to popu-larised.</p>
</div >
</body>
</html>
