网站首页编程语言正文

文本超出显示省略号在项目中的使用

作者：你吃香蕉吗？更新时间： 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

上一篇：for循环生成表单，表单校验失效
下一篇：elementUI无线滚动+监听滚动条触底

网站首页 编程语言 正文

文本超出显示省略号在项目中的使用

相关推荐

网站首页编程语言正文