https://zhuanlan.zhihu.com/p/32354083
最近在工作項目中接觸到Web界面設計的問題，要實現文字兩端對齊的效果。在網上搜索了一下，差不多都是互相轉帖，用的都是類似的技巧：
text-align:justify;
text-justify:inter-ideograph;
但問題是，我怎麼就看不到效果呢？無論是英文還是中文，在IE和chrome下都不起作用。後來，終於在StackOverflow上找到解決方法了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<ul class="arter">
<li><span>作品名稱<i></i></span>： 寶貝兒</li>
<li><span>作品類型<i></i></span>： 油畫</li>
<li><span>藝術家<i></i></span>： 張玉瀛</li>
<li><span>風格<i></i></span>： 超現實</li>
<li><span>材質<i></i></span>： 布面油畫</li>
<li><span>題材<i></i></span>： 人物</li>
<li><span>創作時間<i></i></span>： 2011</li>
<li><span>所在位置<i></i></span>： 華東</li>
<li><span>尺寸<i></i></span>： 78x78cm</li>
</ul>
<br /><br />
<ul class="arter1">
<li><span>作品名稱</span>： 寶貝兒</li>
<li><span>作品類型</span>： 油畫</li>
<li><span>藝術家</span>： 張玉瀛</li>
<li><span>風格</span>： 超現實</li>
<li><span>材質</span>： 布面油畫</li>
<li><span>題材</span>： 人物</li>
<li><span>創作時間</span>： 2011</li>
<li><span>所在位置</span>： 華東</li>
<li><span>尺寸</span>： 78x78cm</li>
</ul>
</body>
</html>
樣式：
從效果圖可以看到，除了要在塊級元素加text-align:justify樣式外，還需要在裏面加一個空的span元素，並應用樣式。另外，對於中文還必須用空格隔開漢字，否則也沒有兩端對齊的效果。英文每個單詞都有空格隔開，所以沒問題。
但是加入HTML元素又違反了結構表現分離的原則，我們可以改用after、before僞元素：
li:after {
content: " ";
display: inline-block;
width: 100%;
}