css - 将文本放入容器并在必要时换行 css

Question

我正在制作一个帖子评论列表，但我在评论文本方面遇到了问题。

我希望容器 div 适合文本，同时能够修剪长单词。比如使用 white-space: pre-wrap;

ul{
list-style:none;
max-width:300px;
}

li{
max-width:300px;
border:1px solid red;
}

.comment{
display:inline-block;
background:green;
max-width:300px;
}

  <ul>

   <li>
       <div class=name>Name</div>
          <div class=comment>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
     </li>

    <li>
       <div class=name>Name</div>
          <div class=comment>Lorem ipsumsit ametconsectetur adipiscing</div>
     </li>
      
    
    <li>
       <div class=name>Name</div>
          <div class=comment>Lorem ipsum  </div>
     </li>
     
     
        
    <li>
       <div class=name>Name</div>
          <div class=comment>Lorem ipsumametconsecteturametconsecteturametconsecteturametconsecteturametconsecteturametconsecteturametconsecteturametconsecteturametconsecteturametconsecteturametconsectetur  </div>
     </li>

</ul>

我如何实现这一点？ display:inline-block 和 white-space: pre-wrap; 左右？这是针对移动设备的，因此文本必须缩小并保持这些属性。

Answer 1

尝试添加word-wrap: break-word;

.comment {
    display: inline-block;
    background: green;
    max-width: 300px;
    word-wrap: break-word;
}