文本自动换行后右对齐，否则左对齐

Question

我正在制作一款用于展示教会赞美诗的移动Web应用程序。当一首赞美诗中的一节超出屏幕宽度时，理想情况下不应该将其分成两行，但由于移动屏幕尺寸大小不同，这是无法避免的。

因此，我希望换行的文本能够右对齐。

如何使用CSS确保换行文本右对齐，而其他文本左对齐？

以下是我想要达到的效果：截图链接

Here is my HTML:

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/>
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br/>
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>

- Andreas Joensen

---

我想不出任何布局方法，无论是文本还是其他方法，都能做到那一点。 - Paulie_D

很遗憾，“text-align”不适用于“:first-line”（否则，如果文本被拆分成单独的行/元素，则可以使用该功能）。 - CBroe

我选择了一个JavaScript的解决方案：https://jsfiddle.net/691uzhn5/1/ - Andreas Joensen

Answer 1

您可以将每个诗节放在一个标签中，并使用text-align-last。问题在于兼容性较差（不支持移动设备和Safari浏览器）。

p {
  -moz-text-align-last: right;
  text-align-last: right;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

您可以在MDN中查看值和兼容性：

https://developer.mozilla.org/es/docs/Web/CSS/text-align-last

- Marcos Pérez Gude

---

并不能完全解决我的问题。屏幕宽度小于一行的文本将会右对齐。也许我可以用一些 JavaScript 来解决这个问题。 - Andreas Joensen

@AndreasJoensen 是的，所有最后一行都将对齐到右侧，如果只有一行，显然它会表现为最后一行。要实现您需要的精确效果很难。使用JavaScript需要切割字符串，这并不是百分之百可靠的。如果您需要更多帮助，请再次来这里。祝你好运。 - Marcos Pérez Gude