CSS text-align-last 属性

text-align-last 属性是一个 CSS3 属性，用于控制最后一行文本的对齐方式。在大多数情况下，文本的对齐方式由 text-align 属性控制，但有以下情况需要使用 text-align-last 属性：

1. 在多行文本块的最后一行中，某些字母延伸到行尾或间距过宽，影响阅读。通过设置 text-align-last: left 或 text-align-last: right，可以解决这个问题，使得最后一行的文本对齐方式和其他行一致。

2. 在文本块中，为了美观或避免出现孤行（单独一行的行末），需要控制最后一行的文本对齐方式。通过设置 text-align-last: justify，可以使得最后一行的文本与其他行一样对齐为两端对齐，从而使排版更整齐。

语法

text-align-last 属性的语法如下：

text-align-last: auto | left | right | center | justify | initial | inherit;

属性值的意义解释：

• auto：默认值，由浏览器决定最后一行文本的对齐方式，通常与 text-align 属性一致。

• left：最后一行的文本左对齐。

• right：最后一行的文本右对齐。

• center：最后一行的文本居中对齐。

• justify：最后一行的文本两端对齐。

• initial：设置为默认值。

• inherit：继承父元素的值。

实例

下面是几个例子，展示了 text-align-last 属性的不同使用场景：

对齐方式不一致

<div class="text-container">
  <p>This is a paragraph with a long word like initialize or initialization or initialization.</p>
  <p>This is another paragraph.</p>
</div>

.text-container {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: justify;
  text-align-last: left;
}

效果如下：

在这个例子中，文本块的 text-align 属性设置为两端对齐，但是由于最后一行的单词过长，导致末端的间距异常。通过设置 text-align-last 属性为 left，可以使最后一行与其他行的对齐方式一致，从而解决了问题。

对齐方式相同

<div class="text-container">
  <p>This is a paragraph with a long word like initialize or initialization or initialization.</p>
  <p>This is another paragraph.</p>
</div>

.text-container {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: justify;
  text-align-last: justify;
}

效果如下：

在这个例子中，文本块的 text-align 属性设置为两端对齐，同时设置了 text-align-last 属性为 justify，使得最后一行的对齐方式与其他行一致。这样一来，文本块中的每一行都是两端对齐的，排版更整齐。

浏览器支持

text-align-last 属性的浏览器支持情况如下：

• Chrome 49+
• Firefox 49+
• Safari 10+
• Opera 36+
• IE11 以及更高版本

总结

text-align-last 属性是一个很实用的 CSS3 属性，用于在某些情况下控制最后一行文本的对齐方式。如果你的文本遇到了空格或单词过长导致排版出现问题的情况，不妨试试使用 text-align-last 属性来解决。