使用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中可以忽略这个问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追逐梦想之路_随笔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值