右对齐包装文本，但左对齐

我正在制作移动Web应用程序以显示教堂赞美诗。理想情况下，赞美诗中的一首诗歌在超过屏幕宽度时不应分成两行，但在移动屏幕尺寸不同的情况下无法避免。右对齐包装文本，但左对齐

相反，我想有文字，这是包装到一个新的行，是正确的对齐。

我如何使用CSS确保包装好的文本是正确对齐的，否则文本会左对齐。看

截图的我多么希望的结果，如：

这里是我的HTML：

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

来源

2016-03-14 Andreas Joensen

我想不出任何布局方法，文本或以其他方式，将做到这一点。 –

太糟糕的'text-align'不适用于'：first-line'（否则它可以使用它，如果文本被分成单独的行/元素）。 – CBroe

我使用javascript解决方案：https：/ /jsfiddle.net/691uzhn5/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

来源

2016-03-14 12:50:30

不完全解决我的问题。比屏幕宽度短的行将被右对齐。也许我可以用一些JavaScript解决这个问题。 –

@AndreasJoensen是的，所有**最后的**行都将对齐到右侧，并且如果有一行明显表现为最后一行。很难完成你需要的东西。使用JavaScript你需要剪切字符串，这不是防弹的。如果您需要更多帮助，请再来这里。祝你好运。 –

右对齐包装文本，但左对齐

回答

相关问题