CSS - hypens 属性

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>

打印本页