完美全兼容解决文字两端对齐 justify 中文姓名对齐

text-align:justify; 所有浏览器都支持，text-justify之类的却只有IE支持，就不要考虑了。

justify我的理解，使元素内部的子元素两端对齐，子元素当然只能是inline或inline-block。但justify对最后一行是无能为力的。我们在对齐姓名时，因为只有一行，当作最后一行，所以不会两端对齐的效果。

姓名对齐我们比较常用的是&ensp;（半个中文空格），&emsp;（一个中文空格）来添充两个字，三个字的姓名，使包括四字的姓名都能对齐。例如：

欧阳大咖

张&ensp;小&ensp;三

王&emsp;&emsp;五

但我们发现大部分浏览器是正常的，但不幸的是我们发现手机浏览器打开大部分是不行的，效果就像下面那样对不齐。

欧阳大咖

张小三

王五

所以就想到了用text-align:justify;但怎么解决单行不能两端对齐呢，思路就是：

　　让浏览器认为这不是最后一行就行了

在元素里面加一个会换行的空的子元素比如:

<i style="display:inline-block;width:100%;height:0;"></i>

例子：html结构

                <ul class="arter"><li><span>作品名称<i></i></span>：  宝贝儿</li><li><span>作品类型<i></i></span>：  油画</li><li><span>艺术家<i></i></span>：  张玉瀛</li><li><span>风格<i></i></span>：  超现实</li><li><span>材质<i></i></span>：  布面油画</li><li><span>题材<i></i></span>：  人物</li><li><span>创作时间<i></i></span>：  2011</li><li><span>所在位置<i></i></span>：  华东</li><li><span>尺寸<i></i></span>：  78x78cm</li></ul>

scss

　　　　　　　　　li{font-size:14px;line-height:24px;color:#4a4a4a;span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;i{display:inline-block;width:100%;height:0;}}}

效果

几点注意事项：

1）span要设置为inline-block;才能和后面的字同行显示，同时设置width才会使<i>换行；

2）必须要设置span元素的height，和overflow:hidden否则<i>还是会占高度；

3）vertical-align:top;可以使，li内的span和后面的字，高度对齐，否则会变成

转载于:https://www.cnblogs.com/shuchong/p/5807316.html

完美全兼容解决文字两端对齐 justify 中文姓名对齐相关推荐

使用css优雅解决文字两端对齐的方式之一
效果图 HTML <body><div>学校</div><div>班级</div><div>班主任</div>< ...
python中文居中对齐处理
!!!该方法仅能解决某一列全为中文时的对齐!!! 未进行中文对齐处理时代码: objects = ['冰淇淋','电热水器','席子'] print('{0:^10}'.format('物品')) # ...
解决p标签自动换行文字两端不对齐问题
<!DOCTYPE html> <html> <head> <title>vue </title> <style type=" ...
关于毕业论文那些事——如何给论文封面单元格文字两端完美对齐
问题描述: 毕业季,要折腾大论文了,学校发的论文格式中有提供论文封面的word版式及图片版的打印效果图,待将word封面融入文档准备生成终稿时,发现封面单元格排版的内容里的文字两端无法实现对齐,而学校 ...
真正可用的CSS文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧: text-align:justify;text-justify:int ...
css两端对齐不起作用?真正可用的CSS文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧: text-align:justify; text-justify:in ...
css如何实现文字两端对齐,CSS实现文字两端对齐的方法是什么
CSS实现文字两端对齐的方法是什么发布时间:2020-08-31 14:13:18 来源:亿速云阅读:76 作者:小新小编给大家分享一下CSS实现文字两端对齐的方法是什么,希望大家阅读完这篇文章 ...
iOS wkWebview调整html文字大小以及文字两端对齐
1.问题:后台给的HTML标签字符串用wkwebview加载时需要适当增大文字大小以及将文字两端对齐修改前效果: 修改后效果: 解决方法:文字增大在wk代理方法实现,使用js语句:文本两端对齐使用添 ...
html中表格中字体两端对齐,CSS真正实现文字两端对齐布局
css实现文字两端对齐一直以来都是一个令人头痛的事情,我也是经常遇到这样的难题,这次抽点时间整理记录一下. 这里真正实现了文字两端对齐功能,下面是代码,其中上面一种使用的是表格布局,下面的是使用的DI ...

完美全兼容解决文字两端对齐 justify 中文姓名对齐

完美全兼容解决文字两端对齐 justify 中文姓名对齐相关推荐

最新文章

热门文章

完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐

完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐相关推荐

最新文章

热门文章

完美全兼容解决文字两端对齐 justify 中文姓名对齐

完美全兼容解决文字两端对齐 justify 中文姓名对齐相关推荐