防止在 ::before 伪元素下换行 [重复]答案

【问题标题】：prevet line break going under ::before pseudo element [duplicate]防止在 ::before 伪元素下换行 [重复]
【发布时间】：2021-12-04 19:48:17
【问题描述】：

p::before {
  content: "1. ";
}

p {
  width: 200px;
}

&lt;p&gt;This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;

如何让换行符从右边开始，让伪元素下面没有任何文字？

【问题讨论】：

stackoverflow.com/a/33363184/8620333

标签： javascript html css

【解决方案1】：

Flexbox 可以解决这个问题。

p::before {
  content: "1. ";
}

p {
  width: 200px;
  display: flex;
}

&lt;p&gt;This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;

或者，使用 CSS 表格

p::before {
  content: "1. ";
  display: table-cell;
  padding:.25em;
}

p {
  width: 200px;
  display: table-row;
}

span {
  color: red
}

<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
  ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <span>INTERCEDING SPAN</span> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

【讨论】：

这似乎适用于普通文本，但是链接Lorem ipsum <span>dolor sit amet</span> span-元素中的文本正在分组
这不是你要求的。
但我添加了另一个选项。

【解决方案2】：

在p 元素上设置display: flex 或display: inline-flex。但是，我建议使用标准的 ul li 来代替伪元素。

【讨论】：