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内容）。但是，您不能为内联元素指定width属性（据我所知）。

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

Answer 2

如果您对此内容有包装，则可以将其设置为网格容器并轻松实现所需的内容：

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

使用flexbox和display:contents（https://caniuse.com/#feat=css-display-contents）的另一个想法

.wrapper {
  display:flex;
  flex-wrap:wrap;
  padding-left:10px;
}

span {
 display:contents;
 outline:1px solid green;
}
/*create line break*/
span:before {
  content:"";
  flex-basis:100%;
}

/*control the width*/
span:after {
  content:"";
  width:20px;
}

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

这也是使用计数器的另一种方式：

body {
 counter-reset: count;
}

span {
  counter-increment: count;
  font-size:0; /*remove default content*/
}
/*add line break*/
span::before {
  content: "\A";
  white-space: pre;
}

/*add content with counter*/
span::after {
  content:counter(count);
  font-size:initial;
  display:inline-block;
  width:30px; /*control the width*/
  text-align:center;
}

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

宽度和换行符在之前的跨度元素

2 个答案: