能否用CSS实现文本从下到上、从右到左的反向填充？

当屏幕尺寸较小时，文本默认按从上到下、从左到右的顺序换行填充（示例代码如下）：

div {
  display: inline-block;
  background: gray;
  text-align: justify;
  word-break: break-all;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

默认填充效果：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor in
cidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aut
e iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla par
iatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui offic
ia deserunt mollit anim id est laborum.

期望实现从最后一行开始填充，按从下到上、从右到左的顺序排列，效果如下：

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud  exercitation ullamco laboris nisi ut al
iquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint obcaecat cupidita
t non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

请问是否可以通过CSS实现该效果？已查阅text-*系列属性未找到有效设置，尝试direction: rtl无法满足需求，推测需要类似direction: btt（从下到上）的属性。

CSS没有原生的direction: btt这类从下到上的文本流向属性，但可以通过组合transform翻转与文本方向设置来模拟需求效果，具体实现方案如下：

实现代码 #

HTML（需给文本套一层内部容器）

<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>

CSS

div {
  display: inline-block;
  background: gray;
  /* 翻转容器，让文本流从下到上填充 */
  transform: rotate(180deg);
  /* 设置文本行内方向为从右到左，配合翻转实现短行右对齐 */
  direction: rtl;
  text-align: justify;
  word-break: break-all;
}

div span {
  /* 反向翻转内部文本，恢复正常阅读顺序 */
  display: inline-block;
  transform: rotate(180deg);
  /* 重置文本方向为正常从左到右 */
  direction: ltr;
}

原理说明 #

1. 外层容器通过transform: rotate(180deg)整体翻转，使原本的文本底部变成视觉上的顶部，实现从下到上的填充顺序。
2. 外层设置direction: rtl，让文本在翻转后的容器内按从右到左的行内顺序排列，确保最后剩下的短行（原文本开头）对齐容器右侧。
3. 内层span再次反向翻转，把文本内容恢复为正常阅读顺序，同时重置direction: ltr保证每行内的文本是从左到右的正常逻辑。

这样就能完全匹配你想要的文本填充效果。

内容的提问来源于stack exchange，提问作者finefoot