引入CSS text-align-last属性

爱被打了一巴掌 2022-12-03 09:58 114阅读 0赞

Sometimes tiny details that mostly go unnoticed can make or break the user experience. This can include subtle text shadows applied to a headline or proper spacing between different elements on a web page.

有时，通常不会引起注意的微小细节可能会破坏用户体验。 这可能包括应用于标题的微妙文本阴影或网页上不同元素之间的适当间距。

The `text-align-last` property is useful in this respect. It specifies how either the last line of a block or the line right before a forced line break will be aligned. This is important because the last line in a paragraph generally doesn’t have enough text to fill up the entire space. You may or may not notice the changes but it will improve the overall look of your website.

在这方面， `text-align-last`属性很有用。 它指定了块的最后一行或强制换行符之前的行将如何对齐。 这很重要，因为段落的最后一行通常没有足够的文本来填充整个空间。 您可能会或可能不会注意到所做的更改，但这将改善您网站的整体外观。

This tutorial will cover all the aspects of the `text-align-last` property including acceptable values, support and browser specific behavior.

本教程将介绍`text-align-last`属性的所有方面，包括可接受的值，支持和特定于浏览器的行为。

## 用法和可能的值 **(**Usage and Possible Values**)** ##

It is pretty simple to use `text-align-last` in your projects. Here is a basic snippet to align the last line of text to the right:

在项目中使用`text-align-last`非常简单。 这是将文本的最后一行向右对齐的基本代码段：

.intro-graph {
      text-align: justify; // Required for IE and Edge 
      text-align-last: right;
    }

This property has seven possible values. You are probably familiar with the usual `left`, `right` and `center` values. They align the text in the last line to the left, right and center of the container. The following demo shows the differences between these three values:

此属性有七个可能的值。 您可能熟悉通常的`left` ， `right`和`center`值。 它们将最后一行中的文本对齐到容器的左，右和中心。 以下演示显示了这三个值之间的区别：

See the Pen [text-align-last — Example 1][text-align-last _ Example 1] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅Pen [Text-align-last —][text-align-last _ Example 1]在[CodePen][]上由SitePoint( [@SitePoint][SitePoint] ) [编写的][CodePen] [示例1][text-align-last _ Example 1] 。

The fourth value, `justify`, aligns the last line in such a way that the text aligns its left and right edges to the left and right edges of the container. This is achieved by inserting an appropriate amount of space between words when necessary. Depending on the amount of text, you can use this property to completely fill the space on the last line without too much gap between words. The text in the second paragraph is also justified but since the last line only contains one word it is aligned to the left.

第四个值`justify`对齐最后一行，以使文本的左右边缘与容器的左右边缘对齐。 这是通过在必要时在单词之间插入适当量的空格来实现的。 根据文本的数量，您可以使用此属性完全填充最后一行的空间，而单词之间不会有太大的间隙。 第二段中的文本也是合理的，但是由于最后一行仅包含一个单词，因此它在左侧对齐。

See the Pen [text-align-last — Example 2][text-align-last _ Example 2] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[的text-align-最后-例2][text-align-last _ Example 2]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

While left aligning the last line of text works for languages that are read from Left to Right (LTR), it will be wrong to do so with RTL languages. In such cases, assigning the values `left` or `right` can cause issues when you don’t know the language to be used beforehand.

虽然左对齐文本的最后一行适用于从左到右(LTR)读取的语言，但是使用RTL语言这样做是错误的。 在这种情况下，如果您事先不知道要使用的语言，则`left`或`right`分配值可能会导致问题。

Fortunately, you can use the keyword `start` to align the text to the starting position of a line based on the direction of text. This implies that setting `text-align-last` to `start` will left align the text of LTR languages and right align the text of RTL languages. Similarly, you can use the value `end` to align the text to the ending position of a line based on the direction of text. This will right align the text of LTR languages and left align the text of RTL languages.

幸运的是，您可以使用关键字`start`来根据文本的方向使文本与直线的起始位置对齐。 这意味着将`text-align-last`设置为`start`将使LTR语言的文本左对齐，而RTL语言的文本右对齐。 同样，您可以使用值`end`根据文本的方向将文本与行的结束位置对齐。 这将使LTR语言的文本右对齐，并使RTL语言的文本左对齐。

See the Pen [text-align-last — Example 3][text-align-last _ Example 3] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅PenPen [text-align-last —][text-align-last _ Example 3] [CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的[示例3][text-align-last _ Example 3] 。

The default value for this property is `auto`. In this case, the text inside the last line is aligned using the value of the `text-align` property unless `text-align` is set to `justify`. When set to `justified`, the text is justified only if the value of the `text-justify` property is set to `distribute`. Otherwise, the text is start aligned.

此属性的默认值为`auto` 。 在这种情况下，除非`text-align`设置为`justify`否则最后一行内的文本将使用`text-align`属性的值进行`justify` 。 设置为`justified` ，仅当`text-justify`属性的值设置为`distribute` ，文本才被`text-justify` 。 否则，文本将开始对齐。

## 值得注意的要点 **(**Noteworthy Points**)** ##

The spec says the property requires `text-align` to be set to `justify` for `text-align-last` to work. However, only IE and Edge seem to implement this rule. The property works in both Firefox and Chrome without setting `text-align` to `justify`. The following demo should have all the text aligned to the right in Edge and IE. On other browsers, the last lines will be aligned based on the value of `text-align-last` and rest of the lines will be right aligned.

规范说，该属性要求设置`text-align`以`justify` `text-align-last`正常工作。 但是，只有IE和Edge似乎执行此规则。 该属性在Firefox和Chrome中均可使用，而无需将`text-align`设置为`justify` 。 以下演示应在Edge和IE中将所有文本右对齐。 在其他浏览器上，最后一行将根据`text-align-last`的值进行`text-align-last`而其余各行将进行右对齐。

See the Pen [text-align-last — Example 4][text-align-last _ Example 4] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅PenPen [text-align-last —][text-align-last _ Example 4] [CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的[示例4][text-align-last _ Example 4] 。

You might feel that the results are not as appealing as those achieved by setting `text-align` to `justify`. So, in most of the cases you will probably `justify` the text anyway.

您可能会感到结果不如通过将`text-align`设置为`justify`所获得的结果那么吸引人。 因此，在大多数情况下，无论如何您都可以`justify`文本的`justify` 。

The property still works even if the line break is forced by, let’s say, a `<br>` tag or something like that. You should also keep in mind that this property will align all the last lines of text inside the specified element and not just the absolute last line of content. For instance, if the text inside an `article` or `div` element has 3 paragraphs, each of them will have their last line aligned based on `text-align-last`.

即使换行是由`<br>`标记或类似的东西强制执行的，该属性仍然有效。 您还应该记住，此属性将使指定元素内的所有最后一行文本对齐，而不仅仅是内容的绝对最后一行。 例如，如果`article`或`div`元素中的文本具有3个段落，则每个`text-align-last`最后一行将基于`text-align-last` 。

If you intend to just align the absolute last line of your content, then depending on the situation, you can use the `:last-child` or `:last-of-type` selector. Take the code from the demo below as an example:

如果您打算只对齐内容的绝对最后一行，则根据情况，可以使用`:last-child`或`:last-of-type`选择器。 以下面的演示代码为例：

article {
      text-align: justify;
    }
    
    article p:last-of-type {
      text-align-last: right;
    }

It aligns the last line of the last paragraph in our article to right. Rest of the lines are aligned based on the value of `text-align` property.

它使我们文章最后一段的最后一行与右侧对齐。 其余行根据`text-align`属性的值`text-align` 。

See the Pen [text-align-last — Example 5][text-align-last _ Example 5] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅PenPen [text-align-last —][text-align-last _ Example 5] [CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的[示例5][text-align-last _ Example 5] 。

Similarly, you can also use other selectors like `:even` and `:odd` to change alignment alternately.

同样，您也可以使用其他选择器，例如`:even`和`:odd`来交替更改对齐方式。

Occasionally, you will have some content where the last line and the first line of a paragraph are same. In other words, the paragraph has just one line. In this case, if you have specified values for both the `text-align` as well as the `text-align-last` property, the `text-align-last` property will take precedence. The only exception is when `text-align` specifies an explicit `first-line` alignment using the value, [‘start end’][start end] .

有时，您会在段落的最后一行和第一行相同的地方看到一些内容。 换句话说，该段只有一行。 在这种情况下，如果您同时为`text-align`和`text-align-last`属性指定了值，则`text-align-last`属性将优先。 唯一的例外是当`text-align`使用值['start end'][start end]指定显式的`first-line`对齐方式[时][start end] 。

Consider the code snippet below:

考虑下面的代码片段：

p {
      text-align: justify;
    }
    
    p:nth-of-type(2) {
      text-align-last: left;
    }

If the second paragraph, in this case, has just one line then the text would be left aligned instead of being justified because `text-align-last` will take precedence. The demo below shows the CSS above in action along with two other examples.

如果在这种情况下第二段只有一行，那么文本将保持对齐状态而不是对齐，因为`text-align-last`将优先。 下面的演示展示了上面CSS以及其他两个示例。

See the Pen [text-align-last — Example 6][text-align-last _ Example 6] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅PenPen [text-align-last —][text-align-last _ Example 6] [CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的[示例6][text-align-last _ Example 6] 。

## 浏览器支持 **(**Browser Support**)** ##

After covering all the important aspects of this property, let’s discuss browser support. The support for this property can be enabled using the “Enable Experimental Web Platform Features” in both Chrome and Opera from version 35 and 22 onward respectively. It is fully supported by Chrome and Opera from version 47 and 34 onward.

涵盖了此属性的所有重要方面之后，让我们讨论浏览器支持。 可以分别从35版和22版开始使用Chrome和Opera中的“启用实验性Web平台功能”来启用对此属性的支持。 Chrome和Opera从47和34版本开始完全支持它。

To use this property in Firefox, you will have to use the `-moz-` prefixed version. The values `start` and `end` are not supported by Internet Explorer. However, Edge fully supports this property. One notable browser that does not support `text-align-last` at all is Safari. You can read more about browser support [here][].

要在Firefox中使用此属性，您将必须使用`-moz-`前缀的版本。 Internet Explorer不支持值`start`和`end` 。 但是，Edge完全支持此属性。 Safari是一种根本不支持`text-align-last`著名浏览器。 您可以[在此处][here]阅读有关浏览器支持的更多信息。

With the overall support of 61.85%, it won’t hurt to start using this property. Users with unsupported browsers are not going to notice any difference.

在61.85％的总体支持下，开始使用此属性不会有任何伤害。 使用不受支持的浏览器的用户不会注意到任何区别。

## 结论 **(**Conclusion**)** ##

While you can use the `text-align-last` to properly align the text in your article, another interesting use case is to properly align the multi-line captions of your images. If you have some other use cases of this property in mind or have any questions, please share them with us in the comments.

虽然您可以使用`text-align-last`来正确对齐文章中的文本，但另一个有趣的用例是正确对齐图像的多行标题。 如果您有其他关于此属性的用例，或者有任何疑问，请在评论中与我们分享。

> 翻译自: [https://www.sitepoint.com/introducing-the-css-text-align-last-property/][https_www.sitepoint.com_introducing-the-css-text-align-last-property]

[text-align-last _ Example 1]: http://codepen.io/SitePoint/pen/KMNEBO/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[text-align-last _ Example 2]: http://codepen.io/SitePoint/pen/gMLEdj/
[text-align-last _ Example 3]: http://codepen.io/SitePoint/pen/oLYVae/
[text-align-last _ Example 4]: http://codepen.io/SitePoint/pen/beBZmz/
[text-align-last _ Example 5]: http://codepen.io/SitePoint/pen/xORBQq/
[start end]: https://www.w3.org/TR/css-text-3/#text-align
[text-align-last _ Example 6]: http://codepen.io/SitePoint/pen/YWpgRe/
[here]: http://caniuse.com/#search=text-align-last
[https_www.sitepoint.com_introducing-the-css-text-align-last-property]: https://www.sitepoint.com/introducing-the-css-text-align-last-property/