当前位置:首页 > java知识学习_java技术文章 > 正文

css两端对齐设置方式与效果展示

浏览191+

今天我们谈一下前端开发工作中容易遇到的CSS样式实现文字或文本两端对齐的问题,至于什么是两端对齐呢,从字面意思来看就是给你一段文字,无论这个这段文字有多少个字,中间有多少标点符号,而我们始终保持它的两端是平行对齐的。

文字两端对齐图

上图中清晰地展示出一段文字的两端对齐,既显的文字工整又简洁整齐,相对于左对齐来说,整行最右边的文字就不会整齐划一,右对齐的话,最左边的文字又不会对齐,所以CSS两端对齐是最常用最好的展现方式。

css两端对齐也有一个弊端,如果一味地全部两端对齐就会出现下图右侧展示的结果,最后一行中文字很少的情况下,如果也使用两端对齐,文字之间的空隙就会变得非常大,而实际情况中我们希望实现的是css不完全两端对齐(左下图效果),带着这些问题,小编将会在接下来的文章中一一解决。

两端对齐与不完全两端对齐

css文本左右两端对齐代码实现

text-align用于设置块级元素内文本的水平对齐css样式,其下有left、right、center等属性,而text-align: justify就是设置文本两端对齐的属性,这个justify存在两个问题,第一,如果只有一行文本的情况下,justify无法实现两端对齐,第二,如果多行文本的情况下,最后一行不会有两端对齐的效果。

单行文本无法实现CSS两端对齐代码案例:

<div class=”id”>unclekeith wanna be a geek!</div>;
.id {
background-color: lightblue;
text-align: justify;
}

单行文本两端对齐失败图

多行文本无法实现CSS两端对齐案例:

多行文本最后一行无法实现两端对齐图

单行文本和多行文字实现css两端对齐思路与代码案例(第一种方法):

既然单行文字相当于最后一行无法生效两端对齐,多行文字也是最后一行不能生效,那么我们何不在原先的基础上增加一行文本呢,只不过新增加的这一行文本在展示时使用css样式隐藏掉或者干脆不给与展示不就行了吗?本着这样的思路看如下具体的代码实现效果展示。

.id {
text-align: justify;
}
.id:after {
display: inline-block;
width: 100%;
content: ”;
}

多行文本两端对齐效果展示

css两端对齐思路与代码案例(第二种方法):

最近get到一个新的css样式属性:text-align-last:justify ,该属性规定如何对齐文本的最后一行,也被称为最后一行在被强制换行之前的对齐规则,该属性只作用在文本的最后一行,对其他文本不产生任何影响。

<div class=”item”>
<p>
<span class=”label”>姓名</span>:
<span class=”value”>张三</span>
</p>
<p>
<span class=”label”>家庭住址</span>:
<span class=”value”>北京市朝阳区</span>
</p>
</div>

 

<style>
.label{
display: inline-block;
height: 100%;
width: 100px;
vertical-align: top;
text-align-last: justify;
}
</style>

text-align-last:justify两端对齐

text-align-last:justify这个css属性对浏览器兼容性是有要求的,目前根据测试结果来看,该属性仅支持在IE浏览器中应用,其它浏览器建议使用第一种方式。

 

相关文章推荐

CSS实现两端对齐效果

CSS 图像左右对齐

怎样设置文字右对齐 css

CSS之文本两端对齐

表单短标题(2、3、4个字)的两端对齐- HTML + CSS

小技巧|CSS如何实现文字两端对齐

text-algin:justify实现文本两端对齐方法小结

css两端对齐不起作用?真正可用的CSS文字两端对齐

责任声明:文章信息由IT教程屋小编精心整理总结编排而成,倾注了心血和汗水,转载时请遵循行业规范务必注明文章作者、来源及本页链接,谢谢合作!
本篇文章标题:css两端对齐设置方式与效果展示
本篇文章url地址:http://www.itjcw123.cn/2321.html