CSS省略文字及JavaScript判斷是否有省略

有時候為了版面美觀，會將過長的文字敘述隱藏而使用ToolTip的方式顯示，但當文字並沒有被隱藏卻顯示ToolTip則顯得有點多餘，因此分享以下的判斷方式做為參考。

<style>
    table{
        margin: 1em;
    }
    .row div {
        padding: 5px;
    }
    /** 透過CSS設定將長度大於100px的內容隱藏 **/
    .shortern div{
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tip{
        background: black;
        color: white;
        font-weight: bold;
        padding: 5px;
    }
</style>

<div class="row">

    <table class="shortern" border="1">

        <tr>

            <td>

                <div>Something is very looooong</div>

            </td>

        </tr>

        <tr>

            <td>

                <div>Short</div>

            </td>

        </tr>

    </table>

</div>

<div class="row tip" style="position: absolute">

    <!--I am tooltip;-->

</div>

<script>

    $(document).ready(function(){

        var $tooltip=$(".tip");

        $tooltip.hide();

        $("table div").hover(function(e){

            var targetEle = e.target;

            var $target = $(targetEle);

            /**

             * 判斷Element的scrollWidth是否大於offsetWidth

             * 較大則代表有被隱藏的文字

             * **/

            if(targetEle.scrollWidth > targetEle.offsetWidth){

                var offset = $target.offset();

                offset.left = offset.left + $(targetEle).parent().width() + 30;

                offset.top = offset.top;

                $tooltip.css(offset);

                $tooltip.text($(this).text());

                $tooltip.show();

            }

        },function(e){

            $tooltip.hide();

        })

    });

</script>