CSS text-align-last 属性设置文本最后一行的对齐方式。
它是 CSS3 属性之一。
text-align-last 属性设置所选元素内所有最后一行的对齐方式。
如果 <div> 包含三个段落,则 text-align-last 将应用于每个段落的最后一行。
对于 Firefox 12-Firefox 48,使用前缀 -moz- 支持此属性,对于 Firefox 49-Firefox 65 支持无前缀。
| 初始值 | auto |
|---|---|
| 应用于 | 块容器。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.TextAlignLast =“left”; |
CSS text-align-last 属性值说明
| 值 | 描述 |
|---|---|
| auto | 最后一行与左侧对齐。这是此属性的默认值。 |
| left | 将最后一行对齐。 |
| right | 对齐右边的最后一行。 |
| center | 将最后一行对齐至中心。 |
| justify | 最后一行是另一行的。 |
| start | 最后一行在Line.left的开头对齐,如果方向是左右,则右侧向右右侧。 |
| end | 最后一行在行的末尾对齐。如果方向是左右的,则左转,如果方向向左左右。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
text-align-last: auto | left | right | center | justify | start | end | initial | inherit;
text-align-last 属性示例:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
text-align: justify;
-moz-text-align-last: right;/* For Firefox prior 58.0 */
text-align-last: right;
}
</style>
</head>
<body>
<h2>Text-align-last 属性示例</h2>
<h3>text-align-last: right:</h3>
<div>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</div>
</body>
</html>
带有“start”、“justify”和“center”值的 text-align-last 属性示例:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div.example1 {
text-align: justify;
-moz-text-align-last: start;
text-align-last: start;
}
div.example2 {
text-align: justify;
-moz-text-align-last: center;
text-align-last: center;
}
div.example3 {
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
}
</style>
</head>
<body>
<h2>Text-align-last 属性示例</h2>
<h3>Text-align-last: start:</h3>
<div class="example1">
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</div>
<h3>Text-align-last: center:</h3>
<div class="example2">
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</div>
<h3>Text-align-last: justify:</h3>
<div class="example3">
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</div>
</body>
</html>
带有“end”值的 text-align-last 属性示例:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
text-align: justify;
-moz-text-align-last: right;/* For Firefox prior 58.0 */
text-align-last: end;
}
</style>
</head>
<body>
<h2>Text-align-last 属性示例</h2>
<h3>text-align-last: end:</h3>
<div>
<p>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
<p>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
<p>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
</div>
</body>
</html>
日期:2020-06-02 22:14:47 来源:oir作者:oir
