文字未在div元素内换行

Question

I have tried every CSS setting I can find but I cannot get the text in this div to wrap! I'd appreciate some help as this is my first time working with HTML in like 10 years. Here's my latest attempt:

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

BTW this all has to go into a Wordpress page, I know they can be finnicky about CSS and JavaScript.

Answer 1

Check this snippet out. You just need the word-break and the 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

Is the below what you are expectiing- see the CSS I used:

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

snippet below:

 #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

It's overflow:hidden; and white-space:pre; that are messing you up there. Remove them and you'll be fine.

Divs have overflow:wrap; , and white-space:normal; by default, which is the behaviour you want.