Текст не обертывается внутри элемента div

Question

Я пробовал все настройки CSS, которые я могу найти, но я не могу получить текст в этом div, чтобы обернуть его! Я был бы признателен за помощь, так как это мой первый опыт работы с HTML в течение 10 лет. Вот моя последняя попытка:

#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 все это должно идти в Wordpress страницу, я знаю, что они могут быть finnicky о 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

ли ниже, чем вы expectiing- увидеть 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; по умолчанию, это поведение, которое вы хотите.