jquery - 仅打破长词 css Jquery

标签 jquery css

我有一个评论包装器

这里有两种情况

案例一 短词

   <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 个字符,它就会破坏它,否则什么都不会。

最佳答案

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

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

关于jquery - 仅打破长词 css Jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49327994/

相关文章:

html - 并排对齐文本和图像

asp.net - 如何区分同一页面上不同css中的两个同名类

html - 使用 CSS 缩放时如何修复图像和文本的失真?

jquery - 删除后动态创建的表不再显示

javascript - 避免 DOM 元素在 .text() 上被删除的方法

jquery ajax加载链接问题

javascript - 使用 ajax 和 jquery serialize() 的 POST 请求丢失值

javascript - 在 HTML 中设置高度属性的流体图像

javascript - 基于 URL 查询字符串的弹出和淡入淡出消息 - CSS/JS

javascript - 使用 async : true with ajax, 触发的事件会发生什么