[toc]
## 左中右對齊
## IE兼容
ie并不支持讓**中文**text-align:justify
原因在于谷歌和火狐對text-align:justify進行了算法區分,對CJK文本采用`letter-spacing`算法,而非CJK采用`word-spacing`算法。
而IE并不支持`letter-spacing`算法
So需要使用替代方案
```
text-justify:inter-ideograph;
```
## justify,為什么會失效?
text-align:justify要想有兩端對齊的效果(無論是對文本還是inline-block)。需要滿足兩點:
1. 有分隔點,如空格 (如果是中文文本兩端對齊并不需要,英文需要,inline-block也需要)
2. 超過一行,并且不是最后一行
```
.justify{
text-align:justify;
text-justify:inter-ideograph;
}
.justify:after{
content:'';
display:inline-table; /* inline-block */
width:100%;
}
```
>其它答案
>
這個是因為text-align不會處理被打斷的行(強制打斷的行?)和最后一行。因為你這里的文字只占了一行,所以也是最后一行了,所以text-align設置為justify不會產生任何效果。
解決方法是使用text-align-last,并將其設置為justify。
不過不幸的是,text-align-last不是所有瀏覽器支持。
所以對于不支持text-align-last的,可以在最后一行人工生成兩行文本,然后把第二行隱藏了,那么我們要現實的第一行自然就可以實現兩端對齊了。
而你的span是inline-block,也可以設置寬度(100%),那么這個時候內聯匿名盒的寬度超過行盒,瀏覽器會將其拆成兩行,自然第一行文本的text-align效果就生效了。你的實現剛剛好是上面的第二個實現方法。
```
span:after {
content:'';
width: 100%;
display: inline-block;
overflow: hidden;
height: 0;
}
```
如果不考慮兼容Safari,可以直接使用
```
text-align-last:justify
```
除此之外,IE需要兼容
```
.justify{
text-align:justify;
text-justify:inter-ideograph;
}
```
### justify的應用

>[danger] 如果line-height設置的是固定值,如line-height:20px,則容器需要同步設置line-height:0或則改為相對計算的值。
- 空白目錄
- 未處理
- webpack中的css模塊化
- CSS預處理器
- 效果
- 元素裝飾與美化
- 顏色
- checkbox
- img
- background
- clip-path
- 字體
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有關CSS百分單位的那些奇葩事兒
- 破壞性、包裹性、塊狀化
- 強大的absolute
- padding
- relative
- 繼承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可訪問性隱藏
- 關于scrollHeight/Width
- 包含塊
- margin
- 布局系統
- 雜
- Flex
- Grid
- 自定義布局系統
- gutter實現思路
- 選擇器
- 偽元素和偽類
- css3
- appearance
- CSS2.1
- tmp
- 未定義行為
- 焦點元素
- outline輪廓
- 替換元素
- 盒子模型
- 塊級元素/盒子
- 標記盒子
- 容器盒子(內在盒子)
- 內聯元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 內聯元素盒子模型新解
- line-height定義
- line-height與行內框盒子模型
- line-height與內聯元素的高度機制
- line-height值
- line-height與圖片
- vertical-align支持的屬性值及組成
- vertical-align起作用前提
- vertical-align與圖片
- vertical-align與line-height
- vertical-align前后不一的行為表現
- vertical-align實際應用
- line-height與height
- width/height與auto
- 最小內容寬度
- 最大內容寬度
- min/max-width/height注意事項
- 流:外部尺寸與內部尺寸
- 流體布局下的寬度分離原則
- height:auto
- 瀏覽器渲染原理
- 移動端