手机端单行文字两端对齐：用css伪类实现

JasonZhang 发布于2019-08-29 12:53 / 1283人阅读

摘要：今天在做项目的时候碰到这个问题右侧红线内的小标题单行两端对齐。两端对齐的属性我们知道是，但是这个属性有它的局限性只能为或多行文字才能实现两端对齐。也就是说，在现在的情况下，小标题的单行文字仅仅使用是实现不了两端对齐的。

今天在做项目的时候碰到这个问题：右侧红线内的小标题单行两端对齐。

两端对齐的css属性我们知道是text-align:justify，但是这个属性有它的局限性：
1.display只能为inline或inline-block
2.多行文字才能实现两端对齐。
也就是说，在现在的情况下，小标题的单行文字仅仅使用text-align:justify是实现不了两端对齐的。
那我们就想办法把这个『单行文字』变成『多行文字』

怎样让一块内容后面多出东西，而又不会使页面多出垃圾元素呢？嘿嘿，类比清除浮动用到的方法，我们可以很快就想到使用:after伪类来解决问题。

html


    开发
    阿斯顿


    开发商
    阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿


    开发周期
    阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿

css

.small-unit{
    padding: 10px 0;
}
.label{
    position: absolute;
    display: inline-block;
    width: 4em;
    height: 40px;
    text-align: justify;
    overflow: hidden;
}
.label:after{
    display: inline-block;
    content: "";
    width: 4em;
    height: 40px;
    text-align: justify;
    overflow: hidden;
}
.msg{
    display: inline-block;
    margin-left: 5em;
    position: relative;
}
.msg:before{
    content: "：";
    position: absolute;
    left: -1em;
}

效果图，完美！

注意点

1..label和它的after伪类要部分相同的css属性，来保证after元素是.label的第二行

{
    display:inline-block;
    text-align: justify;
    overflow: hidden;
    width: 4em;
    height: 40px;
}

2.:冒号推荐写在.msg元素的before伪类上，写在label里面或外面都不能满足需求，具体效果可以自己试试看

{{label}}：
或
{{label}}：

3.最后，将.label元素用绝对定位固定住，顺便实现右侧多行的效果。

云服务器 GPU云服务器文本两端对齐 html两端对齐 html手机端文字 html实现手机端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112218.html

如何解决text-align: justify;浏览器、安卓手机不兼容问题

摘要：下载安装的浏览器等也没有问题。但是用安卓手机再带的浏览器，问题就出现了。经过查询找到一个问题。于是给每个文字之间添加了一个空格，成功解决了各浏览器不兼容手机端不兼容的问题。今天需要切一个响应式网页，有一行文字，需要实现两端对齐。代码如下： .h_text{ text-align: justify; width: 200px; } 这一行要两端对齐根据经验找到t...

Bamboy 2019-08-30 13:54 评论0 收藏0
如何解决text-align: justify;浏览器、安卓手机不兼容问题

摘要：下载安装的浏览器等也没有问题。但是用安卓手机再带的浏览器，问题就出现了。经过查询找到一个问题。于是给每个文字之间添加了一个空格，成功解决了各浏览器不兼容手机端不兼容的问题。今天需要切一个响应式网页，有一行文字，需要实现两端对齐。代码如下： .h_text{ text-align: justify; width: 200px; } 这一行要两端对齐根据经验找到t...

techstay 2019-08-01 18:33 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

Berwin 2019-08-01 17:42 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

MASAILA 2019-08-21 16:46 评论0 收藏0