css段落首行缩进2字符_带有CSS3连字符的更好的段落

当页面或列的宽度太窄而无法容纳行时，通常需要使用连字符。 它可以使段落以适当的间距对齐，并且还可以最大程度地减少河流的出现，这是因为将单词分开。

为了进行比较，让我们看一下下面的屏幕截图，注意单词之间的间距。

我们已经能够在印刷媒体中对段落进行断字了，但是直到最近，我们才能够使用名为hyphens的新CSS3属性来对段落进行断字，尽管缺乏浏览器的支持。

在撰写本文时，此新属性hyphens仅在带有前缀的Internet Explorer 10，Firefox 6 +，Safari 5.1+中受支持-令人惊讶的是，它尚未在Chrome中实现。

• 观看演示

用法

hyphens属性接受两个值auto和manual 。 auto值将使浏览器在适当的时候自动为段落连字符。

p {
	text-align: justify;
	-webkit-hyphens: auto;
   	-moz-hyphens: auto;
	hyphens: auto;
}

这给我们以下结果。

使用manual值，作为内容作者，我们需要通过插入­来手动指定单词的拆分方式­ 字词之间的符号（Soft Hyphen）。

<p>Lorem ipsum dolor sit amet, consect­etur adipisic­ing elit, sed do eius­mod tempor incididunt ut labore et dolore magna ali­qua [...]</p>

p {
	text-align: justify;
	-webkit-hyphens: manual;
   	-moz-hyphens: manual;
	hyphens: manual;
}

根据段落的长度，结果可能会有所不同。

结论

如果所有浏览器都支持此功能，我相信Web上的段落会更好地显示。 在此之前，有一个使用名为HyphenatorJavaScript库的不错选择，该库具有更好的兼容性并且还可以在许多语言中工作。

• 观看演示
• 下载源

翻译自: https://www.hongkiat.com/blog/css3-hyphenation/