html - 具有宽度和换行符之前的跨度元素

Question

我从一个 API 接收内容，其中包含几个 span 元素，后跟未标记的文本。

例子:

<span>1</span> Some text. <span>2</span> Some text.

我希望 span 有一个设定的宽度和一个换行符。

例子:

 1 Some text.

 2 Some text.

跨度上的“显示: block ”允许宽度属性，但也会在每个跨度后创建一个中断。

“display: inline-block”允许使用 width 属性，但我之前不知道如何创建换行符。

将 span 保留为“display: inline”允许在每个 span 之前换行(使用::before content)。但是，您不能为内联元素指定宽度属性(据我所知)。

Answer 1

为了达到预期的结果，使用下面的内容和空白选项

span::before {
  content: "\A";
  white-space: pre;
}

<span>1</span> Some text. <span>2</span> Some text.

codepen - https://codepen.io/nagasai/pen/RdmxrR