前端多余文本中間省略號

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多余文本中間省略號</title>
    <style type="text/css">
        .wrap{
            height: 46px;
            line-height: 46px;
            font-size: 0;
        }
        span{
            display: inline-block;
            font-size: 33px;
            vertical-align: top;
        }
        .txt{
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
</head>
<body> 
    <div class="wrap">
        <span class="txt">我希望遇見一個如你一般的人如山間清爽的風(fēng)如古城溫暖的光從山間到田野從客廳到書房只要最后是你就好</span>
        <span class="txt-end"></span>
    </div>  
</body>
<script type="text/javascript">

    // 獲取內(nèi)容
    var txt = $('.txt').html()
    // 截取內(nèi)容后幾位
    var txtEnd = txt.substr(txt.length-4, 4)
    // 插入到尾部元素
    $('.txt-end').html(txtEnd)

</script>
</html>
image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容