HTML 中的文本换行

Question

我有一个关于我的问题的例子：

自动换行（如弹性宽度）或强制换行时，段落的行为不同。

我需要当段落中自动换行时，div 内部段落的大小就像强制换行时一样（因此 div 大小也会更改为断开的段落的大小）。

这是我使用的代码：

CSS：

body {
    display: flex;
}

.myDiv {
    border: 0;
    height: 70px;
    background: #ededed;
    border-left: 1px solid #8e8e8e;
    padding: 0;
}

.myDiv:last-child {
    border-right: 1px solid #8e8e8e;
}

p {
    background: #ffffff;
}

HTML：

<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta<br>Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>

绿线已强制断裂，蓝线未强制断裂

我已经尝试过使用文本换行、断字、空白属性等，但所有这些属性的行为都类似于自动换行，并且代码不会将其识别为强制换行。

Answer 1

为了确保包含段落的 div 的大小能够适当调整，无论换行是自动还是强制，您可以使用管理自动换行和溢出行为的 CSS 属性。但是，根据其内容调整父容器的高度可能需要一些调整。

这是 CSS 和 HTML 代码的修订版本：

CSS：

body {
    display: flex;
    flex-wrap: wrap;
}

.myDiv {
    border: 0;
    background: #ededed;
    border-left: 1px solid #8e8e8e;
    padding: 10px;
    margin: 5px;
    flex: 1 1 auto;
    max-width: 150px; /* Set a max-width to control wrapping */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.myDiv:last-child {
    border-right: 1px solid #8e8e8e;
}

p {
    background: #ffffff;
    margin: 0; /* Remove default margin */
    word-break: break-word; /* Ensure long words break */
    white-space: normal; /* Ensure normal wrapping behavior */
}

HTML：

<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta<br>Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>
<div class="myDiv"><p>Planeta Terra</p></div>

说明：

1. Flexbox：使用

   flex-wrap: wrap

   确保 div 在必要时换行到下一行。
2. 最大宽度：在

   max-width

   上设置

   .myDiv

   可确保内容在 div 内正确换行。
3. Box-sizing：设置

   box-sizing: border-box

   可确保内边距和边框包含在元素的总宽度和高度中，从而更容易控制布局。
4. 断字：

   word-break: break-word

   属性可确保长单词断续以适应容器。
5. White-space：设置

   white-space: normal

   可确保段落内文本的正常换行行为。

这应该有助于 div 根据其内容调整大小，无论换行符是自动的还是强制的。调整

max-width

值以满足您的设计需求。