1

我想在缩进中写几行文本（仅在 HTML 中），就像在这个例子中一样：HERE

以下是我尝试过的：

<p><code>"Knowing is not enough. We</code></p>
<p><blockquote><code>must apply. Willing is not</code></blockquote></p>
<p><blockquote><pre><code>enough. We must do."</code></pre></blockquote></p>

它不起作用。接下来的 2 行与示例的缩进不同。

谁能在这里指出我的错误？

另外，我想知道如何使这 3 行之间的空间不那么大？还是取决于使用的文本类型？（比如，如果你在这里看到，我使用了文本标签。）

提前致谢！

4

4 回答 4

1

The indentation really belongs with the styling, as it's presentation and not semantic meaning that HTML should represent.

However to do this with html only, just consider using breaks and nbsp tags

<p>
"Knowing is not enough, we<br>
&nbsp;&nbsp;must apply. Willing is not<br>
&nbsp;&nbsp;&nbsp;&nbsp;enough, we must do."</p>

Just increase the number of nbsp tags to adjust the spacing.

于 2014-03-06T13:42:46.450 回答
1

您可以放弃 pre 和其他块引用并使用样式来定义缩进，然后标记行缩进级别。例如：

<div>"Knowing is not enough, we</div>
<div style="text-indent:30px;">must apply. Willing is not</div>
<div style="text-indent:70px;">enough, we must do."</div>
于 2014-03-06T13:25:34.833 回答
1

如果您想要问题中链接到的图像中的等宽字体表示，最简单的方法是仅使用pre元素：

<pre>
“Knowing is not enough. We 
              must apply. Willing is not
                    enough. We must do.”
</pre>

结果：

“知道是不够的。我们
              必须申请。愿不愿意
                    足够的。我们必须这样做。”

但是，通常将每一行包装在一个div元素中并使用 CSS 为它们设置缩进会更灵活margin-left。这使您可以使用可变宽度字体。然后，您需要为缩进选择合适的单位，例如em或（浏览器支持更有限）ch。

于 2014-03-06T15:03:34.380 回答
0

您可以将第一行左对齐，其他两行右对齐。

要使诗歌不占用页面的整个宽度，您可以在元素上添加宽度限制。
（请在问题的文本中澄清这些事情。）

示例：http: //jsfiddle.net/hhh87/4/

<div style="text-align: right; min-width:300px; max-width: 40%;">
    <div style="text-align: left;">"Knowing is not enough, we</div>
    <div>must apply. Willing is not</div>
    <div>enough, we must do."</div>
</div>

CSS 替代品

当然，理想情况下，您会使用 CSS 文件而不是内联设置样式。
然后你也可以更通用地设计它：

HTML：

<div class="poem">
    <div>"Knowing is not enough, we</div>
    <div>must apply. Willing is not</div>
    <div>enough, we must do."</div>
</div>

CSS：

.poem > * {
    text-align: right;
    min-width: 300px;
    width: 40%;
}
.poem > *:first-child {
    text-align: left;
}
于 2014-03-06T13:30:21.563 回答