html - 在文本溢出到下一行后，防止文本包装器跨越其父级的整个宽度

Question

在响应式设计中，当我缩小宽度时，文本溢出到下一行，文本包装器现在占据其父级的整个宽度。有没有办法防止这种情况发生？所以它看起来像红色容器？

我可以在容器上添加填充(我会的，比如 1em)，但这仍然不是我想要的，因为它会使文本包装始终具有相同的宽度(溢出后)。我宁愿让这些文本包装器具有基于其内容的宽度。

这是 jsFiddle: https://jsfiddle.net/derive/n2qk03wt/8/

测试代码如下:

*, *:before, *:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

html,body {
  width: 100%;
  height: 600px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%; 
  height: 200px;
  margin-bottom: 1em;
}

.red {
  background: red;
}

.blue {
  width: 20%;
  backgroud-color: #064f7f;
}

span {
  padding: 1em;
  font-size: 25px;
  background: white;
  text-align: center;
}

<div class="red">
<span>some text here</span>
</div>

<div class="blue">
<span>some text here</span>
</div>

Answer 1

请找到下面附加的 CSS 代码。

    *, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%; 
  height: 200px;
  margin-bottom: 1em;
}

.red {
  background: red;
}

.blue {
  width: 30%;
  background: blue;
}

span {
  padding: 5px;
  font-size: 30px;
  background: white;
  text-align: center;
  width: 98%;
}

希望对你有帮助