如何将这个跨度移动到它自己的行？

Question

我正在尝试将 span 移到新行。

这是最能说明问题的 Codepen Demo。

我在 spans 中包含了很多动态内容。

HTML 示例：

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

CSS:

.group {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-top: auto;
  align-self: flex-end;
}

在不更改 HTML 的情况下，我只想将 .num2 移动到新行。我认为添加 display: block 就足够了，但它没有效果，可能是由于 flexbox 样式？

感谢任何建议，干杯。

(注意：暂时不太担心伪元素的位置)

片段：

.group {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-top: auto;
  align-self: flex-end;
}
.num,
.text,
.sym {
  margin-left: .3em;
}
.num,
.text {
  display: inline-block;
}
.num2 {
  margin-left: .3em;
  /* display: block; // this doesn't work */
}

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

Answer 1

通过将 flex-wrap: wrap 和 force num2 添加到下一个 flexbox wrap通过向其添加 flex-basis: 100% 行。

参见下面的演示：

* {
  font-family: sans-serif;
}

body {
  width: 500px;
  margin: 20px auto 0;
}

.ideal {
  float: right;
}

.ideal p {
  margin-top: 0; 
}

.ideal p:nth-of-type(2)::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid black;
  margin-left: .3em;
}

.working {
  float: left;
}

.head {
  color: white;
  text-align: center;
  padding: 8px;
  margin-bottom: 10px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.group {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-top: auto;
  flex-wrap: wrap;
  align-self: flex-end;
}

.num,
.text,
.sym {
  margin-left: .3em;
}

.num,
.text {
  display: inline-block;
}

.num2 {
  margin-left: .3em;
  flex-basis: 100%;
}

.group::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid black;
  margin-left: .3em;
}

<div class="working">
  <div class="head red">What I have now</div>
  <span class="group">
  <span class="num">500</span>
  <span class="text">TEXT</span>
  <span class="sym">~</span>
  <span class="num2">50</span>
  </span>
</div>

如何将这个跨度移动到它自己的行？

How to move this span to its own line?

html

css

pseudo-element

flexbox