引入CSS text-align-last属性
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 by SitePoint (@SitePoint) on CodePen.
请参阅Pen Text-align-last —在CodePen上由SitePoint( @SitePoint ) 编写的 示例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 by SitePoint (@SitePoint) on CodePen.
见笔的text-align-最后-例2由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 by SitePoint (@SitePoint) on CodePen.
请参阅PenPen text-align-last — CodePen上的SitePoint ( @SitePoint )的示例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 by SitePoint (@SitePoint) on CodePen.
请参阅PenPen text-align-last — CodePen上的SitePoint ( @SitePoint )的示例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 article or div element has 3 paragraphs, each of them will have their last line aligned based on text-align-last.
即使换行是由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 by SitePoint (@SitePoint) on CodePen.
请参阅PenPen text-align-last — CodePen上的SitePoint ( @SitePoint )的示例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’ .
有时，您会在段落的最后一行和第一行相同的地方看到一些内容。 换句话说，该段只有一行。 在这种情况下，如果您同时为text-align和text-align-last属性指定了值，则text-align-last属性将优先。 唯一的例外是当text-align使用值'start end'指定显式的first-line对齐方式时 。
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 by SitePoint (@SitePoint) on CodePen.
请参阅PenPen text-align-last — CodePen上的SitePoint ( @SitePoint )的示例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著名浏览器。 您可以在此处阅读有关浏览器支持的更多信息。
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/