小码哥的IT人生

CSS text-align-last 属性 详解

css3基础 2022-07-14 17:33:30小码哥的IT人生shichen

CSS text-align-last 属性

定义和用法

text-align-last 属性规定如何对齐文本的最后一行。

请注意,text-align-last 属性设置的是被选元素内的所有最末行。所以,如果一个 <div> 中有三个段落,text-align-last 会应用于每段的最后一行。如需在容器中的最后一段上使用 text-align-last,您可使用 :last child,请看下面的例子。

注释:在 Edge/Internet Explorer 中,text-align-last 属性仅适用于具有 "text-align: justify" 的文本。

另请参阅:

CSS 教程:CSS 文本

HTML DOM 参考手册:textAlignLast 属性

实例

对齐三个 <div> 元素中的最后一行:

div.a {
  text-align: justify;  /* 针对 Edge */
  text-align-last: right;
}
div.b {
  text-align: justify; /* 针对 Edge */
  text-align-last: center;
}
div.c {
  text-align: justify; /* 针对 Edge */
  text-align-last: justify;
}

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  text-align: justify; /* For Edge */
  -moz-text-align-last: right; /* 针对 58.0 之前的 Firefox */
  text-align-last: right;
}
div.b {
  text-align: justify; /* For Edge */
  -moz-text-align-last: center; /* 针对 58.0 之前的 Firefox */
  text-align-last: center;
}
div.c {
  text-align: justify; /* For Edge */
  -moz-text-align-last: justify; /* 针对 58.0 之前的 Firefox */
  text-align-last: justify;
}
</style>
</head>
<body>
<h1>text-align-last 属性</h1>
<h2>text-align-last: right:</h2>
<div class="a">
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<h2>text-align-last: center:</h2>
<div class="b">
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<h2>text-align-last: justify:</h2>
<div class="c">
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

可以在页面下方找到更多 TIY 实例。

CSS 语法

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

属性值

描述
auto

默认值。每一行的对齐规则由 text-align 的值来确定。

当 text-align 的值是 justify,text-align-last 的表现和设置了 start 的表现是一样的。

left 最后一行向左对齐。
right 最后一行向右对齐。
center 最后一行居中对齐。
justify 最后一行文字的开头与内容盒的左侧对齐,末尾与右侧对齐。
start

最后一行在行起点对齐。

如果 text-direction 为从左到右,则左对齐,如果 text-direction 为从右到左,则右对齐。

end

最后一行在行末尾对齐。

如果 text-direction 为从左到右,则右对齐,如果 text-direction 为从右到左,则左对齐。

initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: auto
继承:
动画制作: 不支持。请参阅:动画相关属性
版本: CSS3
JavaScript 语法: object.style.textAlignLast="right"

更多实例

在容器中的最后一行上使用 text-align-last:

div.b p:last-child {
  text-align-last: center;
}

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  text-align: justify; /* 针对 Edge */
  -moz-text-align-last: center; /* 针对 58.0 之前的 Firefox */
  text-align-last: center;
}
div.b {
  text-align: justify; /* 针对 Edge */
}
div.b p:last-child {
  -moz-text-align-last: center; /* 针对 58.0 之前的 Firefox */
  text-align-last: center;
}
</style>
</head>
<body>
<h1>text-align-last 属性</h1>
<h2>text-align-last: center(影响所有段落):</h2>
<div class="a">
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<h2>text-align-last: center;(只影响最后一段):</h2>
<div class="b">
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -moz- 的数字表示使用前缀的首个版本。

Chrome IE / Edge Firefox Safari Opera
47.0 5.5* 49.0
12.0 -moz-
不支持 34.0

* 在 Edge/Internet Explorer, 不支持 "start" 和 "end" 值。

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024