左對齊段落中的右對齊溢出文本

Question

我正在使用Web應用程序中的詩歌，需要有關對齊問題的幫助。

假設我正在使用以下通常為左對齊的文本：

For now I know that all I lived and was
Moved towards this moment of my heart’s rebirth;
I look back on the meaning of myself,
A soul made ready on earth’s soil for thee.

隨着瀏覽器窗口寬度的縮小（在移動設備上），此文本可能開始溢出到下一行，如下所示：

For now I know that all I lived and was
Moved towards this moment of my heart’s
rebirth;
I look back on the meaning of myself,
A soul made ready on earth’s soil for
thee.

但這不適用於詩歌。 我真的希望它顯示為：

For now I know that all I lived and was
Moved towards this moment of my heart’s
                               rebirth;
I look back on the meaning of myself,
A soul made ready on earth’s soil for
                                  thee.

如何使用CSS實現呢？

Answer 1

是的，但是沒有

---

是的，因為有一個CSS屬性可以做到這一點： text-align-last

每個MDN

text-align-last CSS屬性描述了如何在強制換行符之前對齊塊或行的最后一行

不，因為支持很差。 它是實驗性的（要求用戶啟用瀏覽器的“標志”），或者根本不被支持。

實際上，只有IE Edge和Chrome才真正為桌面瀏覽器提供本地支持。

CanIUse.com

 .parent { width: 150px; border: 1px solid grey; margin: 1em auto; padding: 1em; } p { text-align: left; text-align-last: right; } 

 <div class="parent"> <p>I wandered lonely as a cloud</p> </div> 

Answer 2

我知道這不是您想要的，但是我很想使用<pre>手動對齊這首詩，然后部署媒體查詢來調整font-size和line-height ：

 blockquote pre { padding: 32px; font-size: 16px; line-height: 24px; } /* Adjusts font-size and line-height for smartphones */ @media only screen and (min-device-width:320px) and (max-device-width:480px), only screen and (min-device-width:320px) and (max-device-width:568px) { blockquote pre { font-size: 12px; line-height: 18px; } } 

 <blockquote> <pre> For now I know that all I lived and was Moved towards this moment of my heart's rebirth; I look back on the meaning of myself, A soul made ready on earth's soil for thee. </pre> </blockquote> <blockquote> <pre> For now I know that all I lived and was Moved towards this moment of my heart's rebirth; I look back on the meaning of myself, A soul made ready on earth's soil for thee. </pre> </blockquote> 

Answer 3

只需添加CSS規則和HTML鏈接即可：HTML：

    <link rel="stylesheet" href="stylesheet/main.css" />
    <link rel="stylesheet" href="stylesheet/normal.css" media="(min-width: 808px)" />
    <link rel="stylesheet" href="stylesheet/mobile.css" media="(max-width: 807px)" type="text/css" />

然后在mobile.css為您的詩歌添加CSS規則

#poetry { 
    text-align: left;
}