CSS文本居中并且两端对齐的样式属性text-align-last

Web前端开发 / 5201 次阅读

CSS中 text-align:justify; 实现文本两端对齐，最后一行居左；text-align:center; 实现文本居中显示，两端不对齐。

由于 CSS 一个选择器不能使用相同的两个属性，text-align 属性也不能设置两个属性值，所以不能同时使用 justify 和 center 实现两端对齐居中显示。

要想文本两端对齐且居中显示，需要使用 justify 的附属属性 text-align-last，text-align-last 属性规定文本最后一行的对齐方式，如居左、居中、居右，该属性只有在 text-align 属性设置为 justify 时才起作用。

示例： 

p {
    text-align: justify;
    text-align-last: right;
    -moz-text-align-last: right;  /* 低版本 Firefox 的兼容代码，如Firefox 12.0 */
}

支持的浏览器：

支持的浏览器及版本：Chrome 47.0+、IE5.5+、Firefox 12.0+（该版本需要添加-moz-前缀）、Opera 34.0+。

不支持的浏览器及版本：Safari浏览器 。

附：

text-align-last属性的其它属性值：

值 描述
auto 默认值。最后一行被调整，并向左对齐。
left 最后一行向左对齐。
right 最后一行向右对齐。
center 最后一行居中对齐。
justify 最后一行被调整为两端对齐。
start 最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。
end 最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。