使用text-align: justify解决文本未到末端提前换行的问题

text-align: justify这个属性开发中一般都不是特别常用,但是为了解决文本未到行末而自动换行的问题,则可以使用它轻松解决。这个text-align: justify到底怎么使用,可以看看w3c的标准:

w3c标准指出:
text-align主要是解决文本的水平对齐方式,该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。

样式布局中可以使用文本水平对齐方式的属性:
1.文本靠左边对齐

text-align:left

2.文本靠右边对齐

text-align:right

3.文本靠水平居中对齐

text-align:center

4.子元素从父元素继承 text-align 属性的值

text-align:inherit

5.实现两端对齐文本效果

text-align:justify

以上是text-align属性的可以使用的值,当然这里这要关注一下text-align:justify的使用的主意事项:
1.justify会调整单词和字母间的间隔,使各行的长度恰好相等,使用的时候稍微主意一下;

2.要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。在个别浏览器的单词之间可能会增加额外的空间,使的段落空间有点大。所有这些做法都会影响元素的外观,甚至改变其高度,这取决于用户代理的对齐选择影响了多少文本行;

3.大多数两端对齐文本都使用连字符将长单词分开放在两行上,从而缩小单词之间的间隔,改善文本行的外观。不过,由于 CSS 没有定义连字符行为,用户代理不太可能自动加连字符。然而,CSS 中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。所以CSS中可以忽略这个问题。

猜你喜欢

转载自blog.csdn.net/qq_44472790/article/details/120319671