Question

我在网络应用中使用诗歌并需要有关对齐问题的帮助。

假设我使用以下通常左对齐的文字：

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

Per 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和{{ 1}}：

＆＃13;

line-height

＆＃13;

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

＆＃13;

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

右对齐左对齐段落中的溢出文本

3 个答案: