防止flexbox中文本换行符的宽度扩展答案

【问题标题】：Prevent width expansion on text line breaks in flexbox防止flexbox中文本换行符的宽度扩展
【发布时间】：2020-06-20 16:50:22
【问题描述】：

给出了一个简单的 flexbox 布局，在任意文本旁边显示一个图像，这是期望的结果：

#container {
  align-items: center;
  background: black;
  display: flex;
  justify-content: center;
  padding: 10px;
  width: 500px; /* Dynamic */
}

#image {
  background: white;
  height: 50px; /* Dynamic */
  margin-right: 10px;
  width: 50px; /* Dynamic */
}

span {
  color: white;
  font-size: 40px;
  /* Make sure text also breaks when no hints are available */
  overflow-wrap: anywhere;
}

<div id="container">
  <div id="image"></div>
  <span>long_text_should_be_<br />allowed_to_break</span>
</div>

但是，对于我的用例，我必须使用  而不是  ，这会破坏居中行为。

#container {
  align-items: center;
  background: black;
  display: flex;
  justify-content: center;
  padding: 10px;
  width: 500px;
}

#image {
  background: white;
  height: 50px;
  margin-right: 10px;
  width: 50px;
}

span {
  color: white;
  font-size: 40px;
  overflow-wrap: anywhere;
}

<div id="container">
  <div id="image"></div>
  <span>long_text_should_be_<wbr />allowed_to_break</span>
</div>

我知道后者是预期的行为，因为 flexbox 子项被阻止并且块中的换行符不会缩小到实际的文本宽度。但由于它与  无缝协作，我想知道是否可以通过 或其他换行提示对其进行调整以达到相同的结果。

目标：

必须在动态大小的环境中工作，容器和图像大小可能会有所不同
在没有给出换行提示时必须回退到 break-all 行为
必须使用 1 到 n 个字符的任意文本长度
只需要在带有 LTR 拉丁文本的最新版 Chrome 中工作

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您是否尝试过 paragraph  标签和 css 边距来赋予它们顶部或底部边距。

#container {
  align-items: center;
  background-color: red;
  display: flex;
  justify-content: center;
  width: 500px;
}

#image {
  background: green;
  height: 50px;
  margin-right: 10px;
  width: 50px;
}
#custombr{
margin-top:5px;
margin-bottom:5px
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="container">
  <div id="image"></div>
  <h1>long_text_should_be_<p id="custombr">allowed_to_break</p></h1>
</div>

</body>
</html>

【讨论】：

这引入了强制换行符。那我还不如用 。
是的！但是当您正在寻找替代品时，我建议您使用这个，顺便说一句，您也可以使用 div 标签作为相同的

【解决方案2】：

不要使用  或。如果您将在站点中使用几种语言，这并不好。

这是css中的简单解决方案：

h1 {
  word-wrap: break-word;
  width: 400px;
}

【讨论】：