宽度和换行符在前面的Span元素

Question

我正在从一个API接收内容，该API包括几个span元素，后跟未标记的文本。

示例：

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

我想让跨度有一个设置的宽度和一个线中断之前。

示例：

 1 Some text.

 2 Some text.

跨距上的“Display：Block”允许width属性，但也会在每个跨距后创建一个中断。

“display：inline-block”允许width属性，但我之前无法弄清楚如何创建换行符。

将跨距保留为“display：inline”允许在每个跨距之前换行（使用：：before content）。但是，您不能为内联元素指定width属性（据我所见）。

Answer 1

如果您有一个用于此内容的包装器，您可以使它成为一个网格容器，并轻松地实现您想要的：

null

.wrapper {
  display:grid;
  grid-template-columns:30px 1fr;
}

span {
 text-align:center;
 outline:1px solid green;
}

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>