文本未在 div 元素内换行

Question

我已经尝试了所有我能找到的 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.

挑剔

Answer 1

查看此代码段。您只需要 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>

Answer 2

下面是您所期待的吗-请参阅我使用的CSS：

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

下面的片段：

#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>

Answer 3

是 overflow:hidden; 和 white-space:pre; 把你搞得一团糟。删除它们，你会没事的。

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

文本未在 div 元素内换行

Text not wrapping inside div element

html

javascript

css

whitespace