Html 如何将此跨距移动到其自己的直线？

我正在尝试将

span

移动到新行

下面是一个最能说明这个问题的例子

我在

span

中包装了很多动态内容

HTML示例：

<span class="group">
  <span class="num">500</span>
  <span class="text">TEXT</span>
  <span class="sym">~</span>
  <span class="num2">50</span>
</span>

在不更改HTML的情况下，我只想将

.num2

移到新行。我认为添加

display:block

就足够了，但它没有效果，可能是因为flexbox的样式

谢谢你的建议，干杯

（注意：我现在不太担心伪元素的位置）

片段：

<span class="group">
  <span class="num">500</span>
  <span class="text">TEXT</span>
  <span class="sym">~</span>
  <span class="num2">50</span>
</span>

.group{
显示器：flex；
调整内容：灵活启动；
调整项目：基线；
页边顶部：自动；
自对准：柔性端；
}
纳姆先生，
.文本，
.赛姆{
左边缘：.3em；
}
纳姆先生，
.文本{
显示：内联块；
}
.num2{
左边缘：.3em；
/*display:block；//这不起作用*/
}

500
正文
~
50

通过添加

flex-wrap:wrap

使您的

flexbox

包裹，并通过添加

flex-basis:100%

强制

num2

到下一行

请参见下面的演示：

*{
字体系列：无衬线；
}
身体{
宽度：500px；
利润率：20px自动0；
}
.理想{
浮动：对；
}
.理想p{
边际上限：0；
}
.理想p:n类型（2）：：之后{
内容：''；
宽度：0；
身高：0；
左边框：3倍实心透明；
右边框：3px实心透明；
边框顶部：6px纯黑；
左边缘：.3em；
}
.工作{
浮动：左；
}
.头{
颜色：白色；
文本对齐：居中；
填充：8px；
边缘底部：10px；
}
格林先生{
背景颜色：绿色；
}
瑞德先生{
背景色：红色；
}
.组{
显示器：flex；
调整内容：灵活启动；
调整项目：基线；
页边顶部：自动；
柔性包装：包装；
自对准：柔性端；
}
纳姆先生，
.文本，
.赛姆{
左边缘：.3em；
}
纳姆先生，
.文本{
显示：内联块；
}
.num2{
左边缘：.3em；
弹性基准：100%；
}
.组：：之后{
内容：''；
宽度：0；
身高：0；
左边框：3倍实心透明；
右边框：3px实心透明；
边框顶部：6px纯黑；
左边缘：.3em；
}

我现在有什么
500
正文
~
50

该网站处于只读模式，我无法发表评论。这太棒了，非常感谢：）