CSS 如何实现文字两端对齐

韩寒

最近在工作项目中接触到 Web 界面设计的问题，要实现文字两端对齐的效果。在网上搜索了一下，差不多都是互相转帖，用的都是类似的技巧：
text-align:justify;text-justify:inter-ideograph;但问题是，我怎么就看不到效果呢？无论是英文还是中文，在IE和chrome下都不起作用。后来，终于在 StackOverflow 上找到解决方法了。
     .arter li { font-size: 14px; line-height: 24px; color: #4a4a4a; } .arter span { height: 24px; line-height: 24px; width: 65px; text-align: justify; display: inline-block; overflow: hidden; vertical-align: top; } .arter i { display: inline-block; width: 100%; height: 0; } .arter1 li { font-size: 14px; line-height: 24px; color: #4a4a4a; } .arter1 span { height: 24px; line-height: 24px; width: 65px; text-align: justify; display: inline-block; overflow: hidden; vertical-align: top; } .arter1 span:after { content: " "; display: inline-block; width: 100%; height: 0px; }   

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

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

样式：

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

来源：http://www.yidianzixun.com/article/0m4fws5P
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

零泣

LZ敢整点更有创意的不？兄弟们等着围观捏~