css文字分散两端对齐

c1586 的分享

关于css文字分散两端对齐的问题解答

css文字分散两端对齐 三联

  原理:是通过调整字之间的空格大小来达成的,所以需要事先在每个单词和汉字间都插入一个空格。

  ie下 text-align:justify; 是可以产生作用的。所以在ie下很容易实现:

  p {

  text-align:justify;

  text-align-last:justify;

  }

  text-align-last 在Firefox12-17下仍处理实验支持阶段,需加前缀 -moz-,FF下这样实现

  p{

  text-align:justify;

  -moz-text-align-last:justify;

  }

  Chrome, Safari, Opera实现比较麻烦:Chrome23, Safari5.1.7, Opera12.11 不支持 text-align-last, 但支持 text-align 的 jsutify, text-align:justify 不处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行的两端对齐,但会处理除此之外的其它行,所以只需要将这里的单行变成多行即可,那么我们可以使用伪对象的方式派生出新行,这样不需要额外处理html代码,然后再将派生出的新行隐藏!!

  p{

  overflow:hidden;

  height:20px;

  text-align:justify;

  }

  p:after{

  display:inline-block;

  content:'';

  overflow:hidden;

  width:100%;

  height:0;

  }

 

  这样的,基本上可以实现我们想要的效果了。

下一篇:返回列表

TA发布的帖子

590

收藏

589