使用＆＃34;显示更多＆＃34;动态缩短文本根据屏幕尺寸链接

Question

我想要在不同的屏幕尺寸上显示长文本。 这个想法是：如果屏幕尺寸小于320px，我希望用＆＃34;显示更多＆＃34;缩短全文。链接。

<script type="text/javascript">
    $(function () {
        var limit = 100;
        var chars = $("#myDiv").text();
        if (chars.length > limit) {
            var visiblePart = $("<span> " + chars.substr(0, limit - 1) + "</span>");
            var dots = $("<span class='dots'>... </span>");
            var hiddenPart = $("<span class='more'>" + chars.substr(limit - 1) + "</span>");
            var readMore = $("<span class='read-more'>Read More</span>");
            readMore.click(function () {
                $(this).prev().remove(); // remove dots
                $(this).next().show();
                $(this).remove(); // remove 'read more'
            });

            $("#myDiv").empty()
                .append(visiblePart)
                .append(dots)
                .append(readMore)
                .append(hiddenPart);
        }
    });
</script>
<style type="text/css">
    span.read-more {
        cursor: pointer;
        color: red;
    }

    span.more {
        display: none;
    }
</style>

知道最好的方法是什么？

提前谢谢。