当其父div的宽度变为全屏时，如何将文本拆分为新行？

如何解决当其父div的宽度变为全屏时，如何将文本拆分为新行？

我必须潜水。右Div的右一和左一。正确的Div尺寸固定为（300px）。但是左边的Div没有宽度，并且包含一些文本。当左Div的文本增加时，其父Div的宽度也会自动增加，并最终以全屏显示，但文本溢出！我想把文本打到底。我不想为其父Div设置固定宽度。我也不想使用width：calc（100％-300px）作为父级Div文本来固定其宽度。我使用white-space：pre-line，但是不起作用！如何调整包含文本的Div而不溢出文本？谢谢。这是一些示例代码：

.div-1 {
  float: right;
  width: 300px;
}

.div-2 {
  float: right;
}

<div class='div-1'>
</div>
<div class='div-2'>
  <h3>Some text here...</h3>
</div>

解决方法

您可以使用空白CSS样式

h3 {
    white-space: break-spaces;
}

break-spaces的值与pre-wrap的值相同，除了：

• 任何保留的空白序列始终占用空间，包括行尾。
• 每个保留的空格字符之后都存在换行的机会，包括空格字符之间。
• 这些保留的空间会占用空间并且不会挂起，因此会影响盒子的固有大小（最小内容大小和最大内容大小）。

,

您可以在要结束第一行的地方使用br，也可以将max-width赋予父div，这样它就不会是固定宽度。

,

您可以将两个divs包装到一个容器中，并将其显示设置为flex。另外，将flex属性添加到.div-2并将其设置为 1 。

.div-1 {
  width: 200px;
}

.div-2 {
  flex: 1;
}

.container {
  display: flex;
  width: 100%;
}

<div class="container">
 
  <div class='div-2'>
    <h3>Text</h3>
  </div>
   <div class='div-1'>
  </div>
</div>

如果您希望内容向右浮动，请相应地设置容器宽度和float属性。