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

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

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

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

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

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

  unclekeith wanna be a geek!

  ;

  .id {

  background-color: lightblue;

  text-align: justify;

  }

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

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

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

  .id {

  text-align: justify;

  }

  .id:after {

  display: inline-block;

  width: 100%;

  content: ”;

  }

  css两端对齐思路与代码案例（第二种方法）：

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

  姓名：

  张三

  家庭住址：

  北京市朝阳区

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