到达div末尾时如何使文本继续换行答案

【问题标题】：How to make text continue to new line when reach end of div到达div末尾时如何使文本继续换行
【发布时间】：2019-07-25 21:01:45
【问题描述】：

我希望 div 内的文本在到达 div 的边界时会在新行中继续，而不是溢出。

我尝试使用“word-break”和各种溢出属性，但没有成功解决我的问题。

<div class="col-lg-3">
     <div>  
          <h2>
               <a >
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </a>
          </h2>
     </div>
</div>

我希望标签内的文本将在新行中继续并且不会溢出。

谢谢

【问题讨论】：

用<br/>怎么样？
文字会是动态的，我不知道它的长度
标准行为是文本到达末尾时继续换行。如果它不这样做，那么它必须明确设置在某个地方。我们不知道你的 CSS，所以我们不能说在哪里
<p> when text exceeds width, continue in new line的可能重复

标签： html css text bootstrap-4

【解决方案1】：

您可以使用overflow-wrap: break-word; 或word-wrap: break-word; 来执行此操作。

演示：

h2 {
  overflow-wrap: break-word;
}

<div>  
          <h2>
               <a >
                 long text that overflow ....................................................................................................................................................................................................................................................................................................
               </a>
          </h2>
   </div>

【讨论】：

【解决方案2】：

使用这个overflow-wrap: break-word

<div class="col-lg-3">
    <div>  
          <h2 style="overflow-wrap: break-word">
               <a >
                 long text that overflow long ........... ............................................................................................................................
               </a>
          </h2>
   </div>
</div>

【讨论】：