日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

文本超出顯示省略號(hào)在項(xiàng)目中的使用

作者：你吃香蕉嗎？ 更新時(shí)間： 2023-04-20 編程語(yǔ)言

?

?以上效果在實(shí)現(xiàn)時(shí)，同事采用了js計(jì)算寬度的方式，單獨(dú)計(jì)算出【】區(qū)間的內(nèi)容寬度和占位寬度，但是因?yàn)楸旧硎褂昧撕芏鄇s的計(jì)算，以及長(zhǎng)列表v-for循環(huán)，這顯然會(huì)影響到頁(yè)面性能，因此，我在布局上做了略微的調(diào)整，改用純css的方式，雖然只是一點(diǎn)點(diǎn)性能上的優(yōu)化，但正是這一點(diǎn)點(diǎn)差異的積攢，才能使得項(xiàng)目運(yùn)行更加的流暢。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text-box {
            display: flex;
            width: 400px;
        }
        
        .title {
            flex-shrink: 0;
        }
        
        .right-div {
            padding: 0 20px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            -webkit-text-overflow: ellipsis;
            -moz-text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .left {
            position: absolute;
            left: 0;
            width: 20px;
        }
        
        .right {
            position: absolute;
            right: 0;
            width: 20px;
        }
    </style>
</head>

<body>
    <div class="text-box">
        <div class="title">合同復(fù)用-測(cè)試</div>
        <div class="right-div">
            <span class="left">【</span>
            <span>合同復(fù)用合同復(fù)用合同復(fù)用合同復(fù)用合同復(fù)用合同復(fù)用合同復(fù)用合同復(fù)用合同復(fù)用合同復(fù)用合同復(fù)用</span>
            <span class="right">】</span>
        </div>
    </div>
</body>

</html>

原文鏈接：https://blog.csdn.net/m0_47135993/article/details/121743571

欄目分類
最近更新