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

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

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

要想文本两端对齐且居中显示,需要使用 justify 的附属属性 text-align-lasttext-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 从父元素继承该属性。

如果您觉得上面的内容对您有帮助,可以打赏支持一下!

打赏

关键词: css