如何格式化第一行第二个单词下的html悬挂缩进 [英] how to format html hanging indent under second word of first line

问题描述

我想在一行上放置一个比第一个单词的宽度大2em的悬挂缩进.在代码段中以等宽字体为例，但在div中需要使用可变宽度字体.

  abcdef我希望悬挂缩进量为abcdef的宽度加上2em.它看起来应该像这样，但是宽度可变字体. 

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

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

解决方案

您可以将CSS表与否定的 text-indent

一起使用

无需将每个单词用一个单独的跨度包装.

只需将第一个单词包装在一个跨度中，然后将其余文本包装在另一个跨度中.

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

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

现在我们有2列.

对于第二列:我们需要从第二行开始向下缩进所有文本.

我们可以通过在整个列上设置 padding-left ，然后将第一行移为带有负的 text-indent 的初始位置来做到这一点./p>

演示(调整大小以查看效果)

  p {显示:表；}跨度 {显示:表格单元格；背景:#ccc;红色;}跨度+跨度{颜色:黑色;文字缩进:-1.8em；padding-left:2em；}  

 < p>< span> abcdef</span>< span>我希望悬挂缩进是abcdef加上2em的宽度.看起来应该像这样，但是具有可变宽度的字体.< hr/>< p>< span> abcdefghijklmnop</span>< span>我希望悬挂缩进是abcdef加上2em的宽度.看起来应该像这样，但是具有可变宽度的字体.< hr/>< p>< a</span>< span>我希望悬挂缩进是abcdef加上2em的宽度.它看起来应该像这样，但是要使用可变宽度的字体.< span></p>  

I want to place a hanging indent that is 2em greater than the width of the first word on a line. Example in monospaced font in a code section, but the need for variable width font in a 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.

Each word and each space character is already in a separate span tag if that helps. As in

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

解决方案

You can do this with CSS tables together with a negative text-indent

There is no need to wrap each word in a separate span.

Just wrap the first word in a span and the rest of the text in another span.

On the container element we set: display: table

On the two child spans we set: display: table-cell

Now we have 2 columns.

For the second column: we need to indent all the text starting from the second line and down.

We can do this by setting padding-left on the whole column, and then moving the first line back to its initial spot with a negative text-indent.

Demo (Resize to see the effect)

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

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

这篇关于如何格式化第一行第二个单词下的html悬挂缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！