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

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

姓名对齐我们比较常用的是 (半个中文空格), (一个中文空格)来添充两个字,三个字的姓名,使包括四字的姓名都能对齐。例如:


欧阳大咖

张 小 三

王  五


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


欧阳大咖

张 小 三

王  五


所以就想到了用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:;}
}
}

效果

几点注意事项:

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

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

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

完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐的更多相关文章

  1. 28-python 中格式对齐之中文格式对齐问题

    一般的可以按这个搞,但是中文就会有问题: python基础_格式化输出(%用法和format用法) 对于 print('1234567890' * 10)print('%10s' % '今天好')pr ...

  2. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  3. 可用的CSS文字两端对齐

    最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideogra ...

  4. css实现表单label文字两端对齐

    如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...

  5. HTML,文字两端对齐

    text-align: justify样式的意思是文字两端对齐,但是有时候你会发现这东西不起左右,比如在div标签中的文字. 解决方法:在div中放一个空的span标签,并使用下面的样式. .just ...

  6. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  7. 【】小技巧】CSS文字两端对齐

    需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...

  8. 【小技巧】css文字两端对齐

    一.文字两端对齐方法:  text-align-last: justify; 二.举个丽子:  三.效果如下:  四.注意:  要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.

  9. 实现段落文字两端对齐的css样式

    有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐.其实实现段落的两端对齐,只需要设置两个css 样式即可. .demo{ text-align: jus ...

随机推荐

  1. 在UWP中页面滑动导航栏置顶

    最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...

  2. Go 作用

    Go语句的作用是表示一个batch(多条Tsql命令)的结束,并向sql server 提交batch,由于局部变量的作用域是基于batch的,所以,go语句限制局部变量的作用域在一个batch中. ...

  3. IIS7.5+WebConfig实现页面伪静态和301重定向

    IIS7.5+WebConfig实现页面伪静态和301重定向 使用URLRewriter组件在windows 2003 +iis 6.0下配置伪静态的文章网络上一大堆.但在iis7.0或iis 7.5 ...

  4. Entity Framework Code First实体对象变动跟踪

    Entity Framework Code First通过DbContext.ChangeTracker对实体对象的变动进行跟踪,实现跟踪的方式有两种:变动跟踪快照和变动跟踪代理. 变动跟踪快照:前面 ...

  5. 【Win10 应用开发】扫描和连接Wi-fi网络

    老周今天带大家去“扫雷”了,别当真,是扫描并连接指定无线网络,时尚一点叫Wi-fi. 所以,今天的任务要求你的设备至少有1张无线网卡,目前老周没看到过有N张无线网卡的设备.像笔记本.平板等设备都可以, ...

  6. Effective Modern C++ 42 Specific Ways to Improve Your Use of C++11 and C++14

    Item 1: Understand template type deduction. Item 2: Understand auto type deduction. Item 3: Understa ...

  7. 网络连接详细信息出现两个自动配置ipv4地址

    问题:网络连接详细信息出现两个自动配置ipv4地址,一个是有效地址,一个是无效地址. 解决办法:先将本地连接ip设置成自动获取,然后点击开始——>运行——>输入cmd,回车,进入命令行界面 ...

  8. javascript运动系列第二篇——变速运动

    × 目录 [1]准备工作 [2]加速运动 [3]重力运动[4]减速运动[5]缓冲运动[6]加减速运动[7]往复运动[8]变速函数 前面的话 前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上, ...

  9. 深入理解定位父级offsetParent及偏移大小

    前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...

  10. 深入理解javascript对象系列第一篇——初识对象

    × 目录 [1]定义 [2]创建 [3]组成[4]引用[5]方法 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初 ...