html - 右对齐段落中的溢出文本

Question

我正在网络应用程序中处理诗歌，需要帮助解决对齐问题。

假设我正在处理以下通常左对齐的文本:

For now I know that all I lived and was
Moved towards this moment of my heart’s rebirth;
I look back on the meaning of myself,
A soul made ready on earth’s soil for thee.

随着浏览器窗口宽度的缩小(如在移动设备上)，此文本可能会开始溢出到下一行，如下所示:

For now I know that all I lived and was
Moved towards this moment of my heart’s
rebirth;
I look back on the meaning of myself,
A soul made ready on earth’s soil for
thee.

但这不适用于诗歌。我真的很希望它显示为:

For now I know that all I lived and was
Moved towards this moment of my heart’s
                               rebirth;
I look back on the meaning of myself,
A soul made ready on earth’s soil for
                                  thee.

如何使用 CSS 实现这一点？

Answer 1

是的，....但不是。

---

是的，因为有一个 CSS 属性可以做到这一点:text-align-last

Per MDN

The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned

否，因为支持很差。它要么是实验性的(并且要求用户启用浏览器“标志”)，要么根本不受支持。

只有 IE Edge 和 Chrome 实际上原生支持桌面浏览器。

CanIUse.com

.parent {
  width: 150px;
  border: 1px solid grey;
  margin: 1em auto;
  padding: 1em;
}
p {
  text-align: left;
  text-align-last: right;
}

<div class="parent">
  <p>I wandered lonely as a cloud</p>
</div>