首页 > 代码库 > text-align:justify在项目中碰到的问题
text-align:justify在项目中碰到的问题
最近在项目中,使用了一个新的样式属性:text-align:justigy,这个属性在使用过程中遇到了一些小异常,现在总结下。
text-align
有一个属性值为justify
,为对齐之意。其实现的效果就是可以让一行文字两端对齐显示(文字内容要超过一行)。在移动端的时候,文本显示就比较的重要。我们比较下默认样式:left和justify样式:
同一个文本显示样式如下:
下面截图是文本中一段英文左对齐的右边缘截图:我们发现参差不齐。
使用justify后,文本显示如下:
右侧完全对齐了,也就是整篇文字全部沿着左边缘和右边缘对齐显示了。
但是有时候会出现如下的情况——有时候就会出现文字非常稀松的情况:
代码格式如下:
1 p {text-align: justify;text-indent: 2em;width: 100%;} 2 img {width: 100%;margin-bottom: 10px;}
html格式如下:
1 <p> 2 CSS2中text-align有一个属性值为justify,为对齐之意。其实现的效果就是可以让一行文字两端对齐显示(文字内容要超过一行)。如果您现在浏览器的地址是以http://www.zhangxinxu.com打头的话,就可以发现我的每篇文章都是以两端对齐的方式显示的,所以,有时候就会出现文字非常稀松的情况,如下图所示。 3 <img src="http://pic.qiantucdn.com/58pic/11/31/58/97p58PICV26.jpg" alt="2"> 4 <img src="http://img1.3lian.com/2015/a1/84/d/102.jpg" alt="3"> 5 </p>
我们知道:text-align
其诞生的意义是控制文字的对齐与显示的,从其属性名上就可以看出来。
从其渲染与解析上来看,其主要是用来控制inline水平元素或inline-block元素的对齐与显示的,例
如嵌套行内标签的文字、图片、input表单控件等;而对block水平的元素是没有作用的。
对于上面存在的问题,有两种方式可以解决:
1,将img标签从p标签内单独移动出来显示;
2. 将img标签display:block化;
img {width: 100%;margin-bottom: 10px;display: block;}
如果img换成input标签的化,效果也是同样的。所以需要注意下。
text-align:justify在项目中碰到的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。