單行的：
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
多行的：
word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
js判斷文字是否超出顯示...了，如果是，執行一些方法：
jquery 判斷文字是否超出div出現三個點的省略號
有個需求，就是一個div寬度固定，但是文字可能會超出，超出出現三個點省略，然后鼠標划入的時候顯示全部，不超出鼠標划入就不顯示，這就意味着要判斷文字是否超出了
<html lang="en"> <head> <title>Document</title> </head> <body> <div class="main-left"> <span class="word fl">填報日期填報日期填報日期填報日期填報日期</span> <span>:</span> <span class="title">人填報人填報人填報人填報人</span> </div> <div class="main-right"> <div class="layui-inline input-width-full"> <input type="text" class="layui-input" placeholder=""> </div> </div> <script> $(".main-left > .word").mouseenter(function (e) { var thisWidth = $(this).width(); // div 的寬度 var wordWidth = $(this)[0].scrollWidth; // 先轉為js對象; 文字的寬度 if(wordWidth > thisWidth+5){ // 加5是為了讓div寬度多一點,比文字不超出時多寬,因為文字不超出,那么寬度為div的寬度 $(this).siblings('span.title').html($(this).text()).show(); } }) $(".main-left > .word").mouseleave(function () { // layer.msg('顯示') $(this).siblings('span.title').hide(); }) </script> </body> </html>