html - 如何修复div中的内容？

Question

在 Laravel 刀片文件中附加数据时，我遇到了一个问题，文本溢出 div。我使用了溢出换行：break-word; 财产，但它可以打破如此可疑的词。没有断句怎么解决？

Html（带有溢出换行：断字）：

 <div style="overflow-wrap: break-word;">
   <p>Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet&nbsp;consectetur&nbsp;adipisicing&nbsp;elit.&nbsp;Architecto&nbsp;quas&nbsp;sed,&nbsp;voluptas&nbsp;inventore,&nbsp;vitae&nbsp;repellat&nbsp;iure&nbsp;ad&nbsp;officia&nbsp;dicta,&nbsp;ipsum&nbsp;neque?&nbsp;Voluptate&nbsp;ea&nbsp;quo&nbsp;deserunt&nbsp;nesciunt,&nbsp;quas&nbsp;inventore&nbsp;ducimus&nbsp;atque!</p>
   <ol>
      <li>
         <p>Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet&nbsp;consectetur&nbsp;adipisicing&nbsp;elit.&nbsp;Architecto&nbsp;quas&nbsp;sed,&nbsp;voluptas&nbsp;inventore,&nbsp;vitae&nbsp;repellat&nbsp;iure&nbsp;ad&nbsp;officia&nbsp;dicta,&nbsp;ipsum&nbsp;neque?&nbsp;Voluptate&nbsp;ea&nbsp;quo&nbsp;deserunt&nbsp;nesciunt,&nbsp;quas&nbsp;inventore&nbsp;ducimus&nbsp;atque!</p>
      </li>
      <li>
         <p>Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet&nbsp;consectetur&nbsp;adipisicing&nbsp;elit.&nbsp;Architecto&nbsp;quas&nbsp;sed,&nbsp;voluptas&nbsp;inventore,&nbsp;vitae&nbsp;repellat&nbsp;iure&nbsp;ad&nbsp;officia&nbsp;dicta,&nbsp;ipsum&nbsp;neque?&nbsp;Voluptate&nbsp;ea&nbsp;quo&nbsp;deserunt&nbsp;nesciunt,&nbsp;quas&nbsp;inventore&nbsp;ducimus&nbsp;atque!</p>
      </li>
      <li>
         <p>Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet&nbsp;consectetur&nbsp;adipisicing&nbsp;elit.&nbsp;Architecto&nbsp;quas&nbsp;sed,&nbsp;voluptas&nbsp;inventore,&nbsp;vitae&nbsp;repellat&nbsp;iure&nbsp;ad&nbsp;officia&nbsp;dicta,&nbsp;ipsum&nbsp;neque?&nbsp;Voluptate&nbsp;ea&nbsp;quo&nbsp;deserunt&nbsp;nesciunt,&nbsp;quas&nbsp;inventore&nbsp;ducimus&nbsp;atque!</p>
      </li>
      <li>
         <p>Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet&nbsp;consectetur&nbsp;adipisicing&nbsp;elit.&nbsp;Architecto&nbsp;quas&nbsp;sed,&nbsp;voluptas&nbsp;inventore,&nbsp;vitae&nbsp;repellat&nbsp;iure&nbsp;ad&nbsp;officia&nbsp;dicta,&nbsp;ipsum&nbsp;neque?&nbsp;Voluptate&nbsp;ea&nbsp;quo&nbsp;deserunt&nbsp;nesciunt,&nbsp;quas&nbsp;inventore&nbsp;ducimus&nbsp;atque!</p>
      </li>
   </ol>
</div>

Html（没有任何 CSS 属性）：

标签： htmlcss

Answer 1

用这个

div p {
  word-wrap: break-word;
}