如何在第一行的第二个单词下格式化html悬挂缩进

Question

我想放置一个2y大于第一个单词宽度的悬挂缩进。代码部分中的等宽字体示例，但div中需要可变宽度字体。

abcdef I want the hanging indent to be the width of abcdef plus 2em.
          It should look somewhat like this, but with variable width
          font.

如果有帮助，每个单词和每个空格字符都已在单独的span标记中。如在

<span>abcdef</span><span> </span><span>I</span>...

Answer 1

您可以使用CSS表和负text-indent

来执行此操作

无需在单独的范围内包装每个单词。

只需将第一个单词包装在一个范围内，将其余文本包装在另一个范围内。

在我们设置的容器元素上：display: table

在我们设置的两个子跨度上：display: table-cell

现在我们有2列。

对于第二列：我们需要缩小从第二行开始向下的所有文本。

我们可以通过在整个列上设置padding-left，然后将第一行移回其初始位置并使用负text-indent来完成此操作。

Demo（调整大小以查看效果）

＆＃13;

＆＃13;

p {
  display: table;
}
span {
  display: table-cell;
  background: #ccc;
  color: red;
}
span + span {
  color: black;
  text-indent: -1.8em;
  padding-left: 2em;
}

＆＃13;

<p><span>abcdef</span>  <span>I want the hanging indent to be the width of abcdef plus 2em.It should look somewhat like this, but with variable width font.<span></p>
<hr />  
<p><span>abcdefghijklmnop</span>  <span>I want the hanging indent to be the width of abcdef plus 2em.It should look somewhat like this, but with variable width font.<span></p>
 <hr />    
<p><span>a</span>  <span>I want the hanging indent to be the width of abcdef plus 2em.It should look somewhat like this, but with variable width font.<span></p>

＆＃13;

＆＃13;

＆＃13;