文字两端对齐

在固定宽度的div中实现文字两端对齐有浏览器兼容问题:以下测试在谷歌67  火狐59  IE11

一、谷歌浏览器  

  text-align-last: justify; 即可

二、火狐浏览器

    1. 文字之间必须有空格

<div class="con">
    <div class="text">货号</div><!--没有空格-->
    <div class="text">货 号 尺 码</div><!--有空格-->
</div>

 2. 添加  text-align-last: justify;

三、IE浏览器

 1. 文字之间必须有空格

<div class="con">
    <div class="text">货号</div><!--没有空格-->
    <div class="text">货 号 尺 码</div><!--有空格-->
</div>

 2. 添加  text-align-last: justify;  text-align: justify; 

总结:综上所述应做兼容处理

  1. 文字之间必须有空格

  2. 添加  

    text-align-last: justify;

      text-align: justify; 

猜你喜欢

转载自www.cnblogs.com/zhangruiqi/p/9283883.html