右對齊包裝文本，但左對齊

我正在製作移動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你需要剪切字符串，這不是防彈的。如果您需要更多幫助，請再來這裏。祝你好運。 –

右對齊包裝文本，但左對齊

回答

相關問題