css - 右对齐换行文本，否则左对齐

Question

我正在制作一个移动网络应用程序来显示教堂赞美诗。赞美诗中的一节经文在超过屏幕宽度时最好不要分成两行，但随着移动屏幕尺寸的变化，这种情况无法避免。

相反，我希望文本换行，右对齐。

我如何使用 CSS 确保换行文本右对齐，否则文本左对齐。

我希望结果如何的屏幕截图:

这是我的 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>

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