css 实现最后一行两侧对齐，考虑ios text-align-last 不支持iOS

admin • • 移动开发

在这里插入图片描述
经常可能要做到这种展示效果。用来标注个中标签介绍啥的
但是 会出现某一行。文本过长的话 就是这样的效果 看起来很难受

因为使用的弹性布局 随便左侧我们固定的高度。但是还是会往左边进行挤压导致很难受

这个时候 我们需要给右侧的元素加上一个。flex: 1. 让他自适应 就可以了

.desc {
     flex: 1;
  }

在这里插入图片描述

其实文本两侧对齐通过一个c s s属性即可实现。text-align-last: justify;

但是吧。这个属性 ios 又不支持。这个就又不舒服了
我们也只能通过 空格 或者 弹性布局进行设置了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .text-item {
           display: flex;
       }
        .label {
            width: 80px;
            margin:0 20px 10px 0;
            display: inline-block;
            text-align-last: justify;
            display: flex;  // 考虑 ios
            justify-content: space-between;
        }
        .desc {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="text">
        <div class="text-item">
            <span class="label">  // 考虑 ios
                <span>中</span>
                <span>国</span>
            </span>
            <span class="desc">我是中国人</span>
        </div>
        <div class="text-item">
            
            <span class="label">
                <span>河</span>
                <span>南</span>
            </span>
            <span class="desc">我来自河南省</span>
        </div>
        <div class="text-item">
            <span class="label">
                <span>洛</span>
                <span>阳</span>
            </span>
            <span class="desc">洛阳市很有名，洛阳市很有名洛阳市很有名洛阳市很有名洛阳市很有名洛阳市很有名洛阳市很有名洛阳市很有名洛阳市很有名</span>
        </div>
    </div>
</body>
</html>

关注我。持续更新前端知识。
最近博主在参与那个博客之星的活动。看见的小伙伴 有空的话 麻烦动动小手 帮忙点个五星好评。 非常感谢

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码

)">
< <上一篇
下一篇>>