文本不包含在 div 元素内答案

【问题标题】：Text not wrapping inside div element文本不包含在 div 元素内
【发布时间】：2016-08-03 06:57:47
【问题描述】：

我已经尝试了所有我能找到的 CSS 设置，但我无法让这个 div 中的文本换行！我会很感激一些帮助，因为这是我 10 年来第一次使用 HTML。这是我最近的尝试：

#text0 {
  word-break: break-word; 
  max-width: 500px; width: 500px; 
  word-wrap: break-word; 
  overflow: hidden; 
  white-space: pre; 
  background-color: #afed67; 
}

<div id="text0">

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble
    
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

顺便说一句，这一切都必须进入 Wordpress 页面，我知道他们可能对 CSS 和 JavaScript 很挑剔。

【问题讨论】：

标签： javascript css html whitespace

【解决方案1】：

检查这个sn-p。你只需要word-break 和width

#text0 {
  word-break: break-word; 
  width: 500px; 
  background-color: #afed67; 
}

<div id="text0">

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble
    
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

【讨论】：

啊，我认为问题在于“空白：pre;”在那里。猜猜我只需要手动换行。你帮我省了很多麻烦，谢谢！

【解决方案2】：

是overflow:hidden; 和white-space:pre; 把你搞砸了。删除它们，你会没事的。

Divs 默认有overflow:wrap; 和white-space:normal;，这是你想要的行为。

【讨论】：

【解决方案3】：

以下是您所期望的吗？请参阅我使用的 CSS：

#text0 {
  word-break: break-word;
  max-width: 500px;
  width: 500px;
  background-color: #afed67;
  line-height: 25px;
}

下面的sn-p：

#text0 {
  word-break: break-word;
  max-width: 500px;
  width: 500px;
  background-color: #afed67;
  line-height: 25px;
}

<div id="text0">

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble
    
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

【讨论】：