如何在 HTML 中同时缩进和换行？答案

【问题标题】：How to indent and line break at the same time in HTML?如何在 HTML 中同时缩进和换行？
【发布时间】：2018-12-06 00:33:54
【问题描述】：

我知道我可以使用  进行简单的换行。我也知道我可以通过向 添加样式来添加缩进。

现在我有个问题，就是断了两行，就跟插入 差不多。

我无法对  应用样式，也无法弄清楚如何防止 出现double 换行符。

是否有类似元素不会断线或类似的东西？无论我将什么元素添加到应用样式，它们都有双换行符，例如div。

外观

我想要什么

some text
  some other text
    even more text

我能够实现的目标

这就是我使用三个带有 margin-left 样式的 得到的结果：

some text

  some other text

    even more text

这就是我可以通过br 实现的目标：

some text
some other text
even more text

【问题讨论】：

请提供Minimal, Complete, and Verifiable example。
所以你想创建不会导致断线的元素？
溢出-x=scroll ?
@AndrzejZiółek 我认为这个问题很清楚，很抱歉。

标签： html css

【解决方案1】：

尝试使用带有float: left; clear: both; 的span 元素，然后使用任何你想要的margin-left。

【讨论】：

做到了，谢谢。我以前不知道如何使用span。

【解决方案2】：

你可以使用这个技巧来实现你的目标

span{
display:block;
text-indent:12px;
}
span samp{
display:block;
text-indent:24px;
font-family:initial;
}

<p>
  Some text
  <span>
    Some other text
    <samp>Some other text</samp>
  </span>
  
</p>

【讨论】：

【解决方案3】：

（段落元素）是块级元素。这意味着，默认情况下它将被定位在新行中。

这就是你看到双换行符的原因。

因此，请使用  等内联元素将文本向右移动。

<p>some text<br/>
    <span style='margin-left:12px'>some other text</span><br/>
    <span style='margin-left:24px'>some more text</span></p>

【讨论】：

【解决方案4】：

从p 元素中删除边距（margin-top 和margin-bottom，最重要的是）使它们的行为类似于一个接一个的文本行，然后使用  创建单个换行符。但是，如果您想根据给定p 的位置添加margin-left，则如果没有任何 SCSS 或子编号 1、2、3 等的硬编码值，则无法执行此操作。 SO上关于相同问题的其他帖子：

Post 1、post 2、post 3。

p {
  margin: 0;
}

<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>

【讨论】：