jquery - 仅打破长词 css Jquery

Question

我有一个评论包装器

这里有两种情况

案例一 短词

   <div class="comment">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
   tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco 
   laboris nisi ut aliquip ex ea commodo consequat. 
    </div>

案例二长词与短词混合。

   <div class="comment">
   LoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporLoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporLoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporLoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporLoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporLoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtempor  
    tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
     laboris nisi ut aliquip ex ea commodo consequat. 
       </div>

我一直在检查问题，我不想使用 word-break: break-all; 因为它会模糊地打断所有单词。

我想知道是否可以用 Jquery 检测每个单词的大小，如果一个单词的长度超过..30 个字符，它就会破坏它，否则什么都不会。

Answer 1

您可以尝试使用 overflow-wrap: break-word ... 因为它只会在整个单词不能放在自己的行上而不溢出时创建一个中断。

同时将 max-width 添加到您的容器中，因为我想您不希望行长度变得太长以致于在较大的断点上的可读性。