css实现文字两端对齐

前言

最近在工作项目中接触到Web界面设计的问题，要实现文字两端对齐的效果。在网上搜索了一下，差不多都是互相转帖，用的都是类似的技巧：

text-align:justify;
text-justify:inter-ideograph;

参考

但问题是，我怎么就看不到效果呢？无论是英文还是中文，在IE和chrome下都不起作用。后来，终于在StackOverflow上找到解决方法了。

    
        
        
        
    

    
        

            
作品名称： 宝贝儿
            
作品类型： 油画
            
艺术家： 张玉瀛
            
风格： 超现实
            
材质： 布面油画
            
题材： 人物
            
创作时间： 2011
            
所在位置： 华东
            
尺寸： 78x78cm
        
        


        

            
作品名称： 宝贝儿
            
作品类型： 油画
            
艺术家： 张玉瀛
            
风格： 超现实
            
材质： 布面油画
            
题材： 人物
            
创作时间： 2011
            
所在位置： 华东
            
尺寸： 78x78cm
        
    


复制代码

效果预览

image.png

从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，所以没问题。

但是加入HTML元素又违反了结构表现分离的原则，我们可以改用after、before伪元素：

li:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

参考资料：css实现文字两端对齐