css 固定宽度，文字均匀分布

最新推荐文章于 2025-02-07 19:46:09 发布

Running_FE

最新推荐文章于 2025-02-07 19:46:09 发布

阅读量8.2k

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/Running_FE/article/details/123176553

版权

CSS 文本对齐两端对齐 text-align-last 伪元素

关键词由优快云通过智能技术生成

本文介绍了两种方法在CSS中实现文本两端对齐。第一种方法是使用`text-align-last:justify`属性，但该方法不支持IE浏览器和Safari。第二种方法通过创建一个伪元素并设置其宽度为100%，可以实现跨浏览器的文本两端对齐效果。这种方法需要注意添加高度以避免底部出现空隙。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//方法一：
text-align-last: justify; //不支持IE浏览器和safari浏览器

//方法二：
.label{
    display: inline-block;
    width: 70px;
    height: 20px; /*高度需要添加，不然文字下面会多出一些空隙*/
    text-align: justify;
    &::after {
      content: "";
      display: inline-block;
      width: 100%;
    }
 }