如何在接收到全屏的父 div 宽度时将文本换行？

Question

我必须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>

Answer 1

您可以在您想结束第一行的地方使用 br，或者您可以将 max-width 给父级 div，这样它就不会是固定宽度。

Answer 2

你可以使用white-spaceCSS风格

h3 {
    white-space: break-spaces;
}

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

任何保留白色 space 的序列总是占据 space，包括行尾。
在每个保留的白色 space 字符之后存在换行机会，包括白色 space 字符之间。
这样保留的 space 占用 space 而不会悬挂，因此会影响盒子的固有尺寸（min-content 尺寸和 max-content 尺寸）。

Answer 3

您可以将两个 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>

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

如何在接收到全屏的父 div 宽度时将文本换行？

How to break text to new line when the width of parent div of it received to full screen?

html

css

text

overflow