偏移段落的第一行

Question

HTML

<p><br />1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

使用上面的代码，是否可以获得以下输出，文本在右侧位置逐行堆叠，从段落编号缩进？

Answer 1

如果您可以删除br标记，则可以使用text-indent属性（MDN上的详细信息）

来实现此目标

＆＃13;

＆＃13;

p {
  margin-left: 2em;
  text-indent: -1.5em;
}

＆＃13;

<p>1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p>1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p>1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

＆＃13;

＆＃13;

＆＃13;

如果您无法修改HTML，则解决方法是将display:none;添加到<br/>标记。您仍然可以使用padding-top在段落之间添加间距，并将第一行偏移为负text-indent值：

＆＃13;

＆＃13;

br {
  display: none;
}
p {
  padding-top:1.2em;
  margin-left: 2em;
  text-indent: -1.5em;
}

＆＃13;

<p><br />1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

＆＃13;

＆＃13;

＆＃13;

请注意，我使用em单位来偏移左边的第一行。它将适应字体大小，但需要根据您使用的字体进行调整。

Answer 2

不，它不是因为没有:first-word伪选择器，但如果您稍微更改HTML结构，它很容易实现：

<p><br /><span>1.2</span> text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br /><span>1.3</span> text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text </p>
<p><br /><span>1.4</span> text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

CSS：

p {
    line-height: 1.25em;
    padding-left: 2em;
    position: relative;
    text-align: justify;
}

p > span {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0; 
    width: 2em;
}
p > br:first-child + span {
    top: 1.25em; /* this fixes position in case the <p> starts with a <br/> */
}

  

https://jsfiddle.net/bfa4w3nu/2/

Answer 3

CSS3

li {
    text-align: justify;
    word-wrap: break-word;
}