CSS hyphens属性控制当文本太长而无法放在一行中时如何将单词分成行。此属性可用于提高跨多行文本的可读性。
该属性仅适用于块级元素。
以下是所有可以使用的可能值对于属性连字符:
none: 不允许连字符。
manual: 它指定手动连字符行为用于基于 WebKit 的浏览器中的文本。
auto: 允许在适当的连字点处连字，由浏览器确定。
initial: 初始值，手动设置。
inherit: 从父元素继承的值。
CSS hyphens: 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 hyphens: 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">A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
</div >
</body>
</html> CSS hyphens: 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">A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
</div>
</body>
</html> CSS hyphens: initial
CSS hyphens:initial属性将连字符属性设置为其初始值。 hyphens 属性的初始值是手动的，这意味着仅在用户明确插入连字符的位置才允许连字符。
<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">A man can succeed at almost anything for which he has unlimited enthusiasm..</p>
</div >
</body>
</html> CSS hyphens: inherit
当您使用hyphens:inherit属性，hyphens属性的值是从父元素继承的。该元素的连字符将与其父元素的连字符相同。
<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">
无论何事，只要对它有无限的热情你就能取得成功
<p class="hyphenated-inherit">A man can succeed at almost anything for which he has unlimited enthusiasm..</p>
</div >
</body>
</html>