如果需要css，适合容器中的文本和断行

Question

我正在撰写帖子提交列表，但我在评论文字方面遇到了麻烦。

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这怎么做啊？ 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;
}