上查看所有课程
CSS text-align-last 属性用于控制文本最后一行的水平对齐方式。例如，
p {
text-align-last: center;
}浏览器输出
这里，text-align-last: center 属性将 h1 元素的文本最后一行居中对齐。
Text-Align-Last 属性的语法
text-align-last 属性的语法如下：
text-align-last: auto | left | right | center | justify | start | end | initial | inherit;这里，
auto：与text-align的值匹配；如果未设置text-align，则左对齐left：文本左对齐right：文本右对齐center：文本居中对齐justify：使最后一行的文本两端对齐start：文本对齐到行的起始位置；对于从左到右 (LTR) 的语言是左对齐，对于从右到左 (RTL) 的语言是右对齐end：文本对齐到行的结束位置；对于从左到右 (LTR) 的语言是右对齐，对于从右到左 (RTL) 的语言是左对齐inherit：从其父元素继承text-align-last的值
Text-Align-Last 属性示例
让我们看一个 text-align-last 属性的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-align-last</title>
</head>
<body>
<h3>text-align-last: left</h3>
<p class="left">
Coding is today's language of creativity. All our children deserve a
chance to become creators instead consumers of computer science.
</p>
<h3>text-align-last: center</h3>
<p class="center">
Coding is today's language of creativity. All our children deserve a
chance to become creators instead consumers of computer science.
</p>
<h3>text-align-last: right</h3>
<p class="right">
Coding is today's language of creativity. All our children deserve a
chance to become creators instead consumers of computer science.
</p>
<h3>text-align-last: justify</h3>
<p class="justify">
Coding is today's language of creativity. All our children deserve a
chance to become creators instead consumers of computer science.
</p>
</body>
</html>/* aligns the last line of text to the left */
p.left {
text-align-last: left;
}
/* aligns the last line of text in the center */
p.center {
text-align-last: center;
}
/* aligns the last line of text to the right */
p.right {
text-align-last: right;
}
/* justifies the last line of text */
p.justify {
text-align-last: justify;
}浏览器输出
带换行的 Text-Align-Last
当文本块中存在换行符时，text-align-last 属性控制文本最后一行文本的对齐方式。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-align-last</title>
</head>
<body>
<p>
Mostly, when you see programmers, they aren't doing anything. One of
the attractive things about programmers is that you cannot tell
whether or not they are working simply by looking at them.
<br /><br />
Very often they're sitting there seemingly drinking coffee and
gossiping, or just staring into space. What the programmer is trying
to do is get a handle on all the individual and unrelated ideas that
are scampering around in his head.
</p>
</body>
</html>p {
text-align-last: center;
}浏览器输出
