可选择换行文本答案

【问题标题】：Optionally wrapping text可选择换行文本
【发布时间】：2020-11-08 21:58:45
【问题描述】：

我有一些标语可以显示在单行或多行（如果包裹在特定位置）。是否有 CSS 选项仅在必要时尊重
标记以适应容器宽度，否则将其展开？

例如

<div>
  They told me that<br> aesthetics matter.
</div>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
这个问题之前已经被问过很多次了（例如，stackoverflow.com/questions/18222409/…）。发帖前请先搜索。
这能回答你的问题吗？ Specifying a preferred line break point in HTML text in a responsive design
@user81993 嘿，快来看看我是否解决了你的问题，还是需要提高我的技能？

标签： html css

【解决方案1】：

您可以使用 CSS 代码来中断工作

#content::after {
  content: "\a";
  white-space: pre;
}

<div id="content">They told me that</div>
<div id="break">aesthetics matter.</div>

你也可以定义padding而不是height，因为padding根据它的孩子扩展容器并且防止孩子溢出示例如下

#container {
  width: 300px;
  padding: 5px;
  background-color: grey;
}

<div id="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

【讨论】：

【解决方案2】：

您可以在div 中使用CSS 属性word-wrap: break-word; 来解决您的问题。如果它不能解决您的问题，请在 cmets 中告诉我，我会尽力帮助您。

【讨论】：