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