JS控制文本溢出-优快云博客

本文链接：https://blog.youkuaiyun.com/brain_bo/article/details/84028494

废话不说直接上代码啦，

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>example</title>
    <script src="jquery.min.js"></script>
<style>
    .figcaption{
        background: #EEE;
        /*可不设置宽*/
        width: 410px;
        height: 48px;
        margin: 16px;
    }
    .figcaption p{
        margin: 0;
        line-height: 24px;
    }
    /*行高是高的一半*/
</style>
</head>
<body>
<div id="app">
     <div class="figcaption">
        <p>
            <!-- You probably can't d行高是高的一半行高是高的一半行高是高的一半o it (currently?) without a fixed-width font like Courier. With
            a fixed-wi行高是高的一半dth font eve行高是高的一半ry letter occupies the sa行高是高的一半me horizontal space, so you could
            probably count the letters 行高是高的一半and multiply the result with the current font size in
            ems or exs. Then you would ju行高是高的一半st have to test how ma行高是高的一半ny letters fit on one 行高是高的一半line, and
            then break 行高是高的一半it up. -->

            <!-- You probably can't do it (currently?) without a fixed-width font like Courier. With
            a fixed-width font every letter occupies the same horizontal space, so you could
            probably count the letters and multiply the result with the current font size in
            ems or exs. Then you would just have to test how many letters fit on one line, and
            then break it up.You probably can't do it (currently?) without a fixed-width font like Courier. With
            a fixed-width font every letter occupies the same horizontal space, so you could
            probably count the letters and multiply the result with the current font size in
            ems or exs. Then you would just have to test how many letters fit on one line, and
            then break it up.You probably can't do it (currently?) without a fixed-width font like Courier. With
            a fixed-width font every letter occupies the same horizontal space, so you could
            probably count the letters and multiply the result with the current font size in
            ems or exs. Then you would just have to test how many letters fit on one line, and
            then break it up. -->

            You probably can't d行高是高的一半行高是高的一半行高是高的一半123345667890,./;'[]!~@#$%^&*()_+?><:""::''{}
        </p>
    </div>

</div>
<script>
    $(".figcaption").each(function (i) {
        var divH = $(this).height();
        var $p = $("p", $(this)).eq(0);
        while ($p.outerHeight() > divH) {
            $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
        };
    });
</script>
</body>
</html>

通过js控制，兼容所有浏览器，重点在于height与line-height的关系（倍数）