css两端对齐符号

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在网页排版中,我们经常需要对一些文字或者块元素进行对齐。其中有一种对齐方式就是两端对齐,即让一段文字的首行和末行对齐。在CSS中,实现两端对齐的方式有多种。但是,由于CSS规范的不统一导致不同浏览器支

在网页排版中,我们经常需要对一些文字或者块元素进行对齐。其中有一种对齐方式就是两端对齐,即让一段文字的首行和末行对齐。

在CSS中,实现两端对齐的方式有多种。但是,由于CSS规范的不统一导致不同浏览器支持的两端对齐符号也不同。下面我们来介绍一下两端对齐的几种实现方式:

.text {
  text-align: justify;
  text-justify: inter-word;
} 

上面的代码可以让一段文本进行两端对齐。由于不同浏览器对两端对齐的支持不同,这里我们要多加一个属性:text-justify。这个属性在IE浏览器中不支持,所以我们需要加一个hack,让它在其他浏览器中不被解析:

.text {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: justify;
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .text {
    text-align-last: auto;
  }
} 

还有一种实现两端对齐的方式是使用text-align-last属性。这个属性只在最后一行对齐,所以我们需要先将文本都用justify对齐,再使用text-align-last让最后一行对齐。需要注意的是,这个属性在IE浏览器中也不支持,需要加上hack。

总的来说,实现两端对齐的方式有多种,需要根据具体情况来使用。但是要注意浏览器的兼容性问题,避免出现排版错误。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两端对齐符号

粉丝

0

关注

0

收藏

0

已有0次打赏