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

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

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

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

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

用法

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

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/

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值