Question

我有一个评论包装

有两种情况

CASE ONE 简短的字词

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

CASE TWO 长词混合短词。

   <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 dectec每个单词的大小，如果一个单词比.. 30个字符更长，它就不会打破它。

Answer 1

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

同时为容器添加max-width，正如我想象的那样，你不希望行长度太长而无法在较大的断点上读取。

打破长话只有css Jquery

1 个答案: