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

學無先后，達者為師

網站首頁 編程語言 正文

文本超出顯示省略號在項目中的使用

作者：你吃香蕉嗎？ 更新時間： 2023-04-20 編程語言

?

?以上效果在實現時，同事采用了js計算寬度的方式，單獨計算出【】區間的內容寬度和占位寬度，但是因為本身使用了很多js的計算，以及長列表v-for循環，這顯然會影響到頁面性能，因此，我在布局上做了略微的調整，改用純css的方式，雖然只是一點點性能上的優化，但正是這一點點差異的積攢，才能使得項目運行更加的流暢。

<!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">合同復用-測試</div>
        <div class="right-div">
            <span class="left">【</span>
            <span>合同復用合同復用合同復用合同復用合同復用合同復用合同復用合同復用合同復用合同復用合同復用</span>
            <span class="right">】</span>
        </div>
    </div>
</body>

</html>

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

欄目分類
最近更新