現在有個需求，就是一個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>