右对齐包装文本，否则保持对齐

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。问题是兼容性差（没有移动和野生动物园）。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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