css单行文本两端对齐

p{text-align:justify;text-align-last:justify;
}

上面两行代码大家都很熟悉，对于多行文本来说，基本可以兼容所有的游览器，实现两端对齐。在多行文本中，该样式对于最后一段文字并不处理。

所以对于单行中文文本，我们需要打补丁

p:after{display:inline-block;content:'';overflow:hidden;width:100%;height:0;
}

我们使用after选择器在单行文本的最后加入content，不过这时会导致p被撑开了，所以我们还需要设置高度，完整代码如下：

p{text-align:justify;text-align-last:justify;height:24px;
}p:after{display:inline-block;content:'';overflow:hidden;width:100%;height:0;
}

该方式可兼容所有主流游览器，至少我没遇到不好用的。对于不支持 after选择器的游览器，请使用 selectivize脚本，参照我的另一篇博客

<style>
p{text-align:justify;text-align-last:justify;height:24px;font-size:20px;width:500px;
}p:after{display:inline-block;content:'';overflow:hidden;width:100%;height:0;
}
</style>
<p>文 字 间 要 有 空 格，不 然 不 管 用</P>

css单行文本两端对齐相关推荐

css之文本两端对齐的两种解决方法
css之文本两端对齐的两种解决方法参考文章: (1)css之文本两端对齐的两种解决方法 (2)https://www.cnblogs.com/wl0804/p/11265225.html 备忘一下.
css实现文本两端对齐方法
label{width: 80px;display: inline-block;text-align: justify;text-align-last:justify; } text-align: j ...
两端文字对齐css,css两端对齐怎么设置，css中文本的对齐有哪些
css两端对齐怎么设置,css中文本的对齐有哪些内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些.可以看到,常见的文本对齐方式是靠左.居中以及靠右,相对来说css两端对齐用得 ...
[css] 用css怎么实现两端对齐？
[css] 用css怎么实现两端对齐? 文本的两端对齐<style>.form .text {display: inline-block;width: 65px;text-align-la ...
css如何实现文字两端对齐,CSS实现文字两端对齐的方法是什么
CSS实现文字两端对齐的方法是什么发布时间:2020-08-31 14:13:18 来源:亿速云阅读:76 作者:小新小编给大家分享一下CSS实现文字两端对齐的方法是什么,希望大家阅读完这篇文章 ...
文本两端对齐及将表单打印在A4上
/**工作中遇到一个问题就是单位看到一些有关公司得相关得事项,想要讲内容打印出来,所以前端设计了一个样式, 但是还是有很多不足的地方,暂时没有想到更好的方法,如: 一些字体要求是特殊字体,没有办法为 ...
HTML如何让文本两端对齐
Question 之前看一个外文网站,貌似都不是两端对齐,我想把他转换为PDF文件下载下来.不是两端对齐看起来太难受了.找了个方法. Solution <p style="text-a ...
CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案文章目录 CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二 ...
css+js解决文本两端对齐以及分散对齐
一个很简单的设计排版样式,A图表示居左对其,但实际上我们想要的可能是B所示的对齐方式. 这就是传说中的两端对齐还有一种更确切的说法是两端分散对齐. 最开始的时候 ,我试图使用CSS来解决这个小问题, ...

css单行文本两端对齐

css单行文本两端对齐相关推荐

最新文章

热门文章