div内容过长自动省略号

<div class="tits" style="width:900px;">${item.note}</div>
  
    //自动计算长度,并剔除html元素
    $(".tits").each(function(i) {
        var leg = 280;
        $(this).html($(this).text());
            var copyThis = $(this.cloneNode(true)).hide().css({
                'position': 'absolute',
                'width': 'auto',
                'overflow': 'visible'
            });
            $(this).after(copyThis);
            if(copyThis.width()>$(this).width()){
                $(this).html($(this).text().substring(0,leg)+'...');
                copyThis.remove();
            }else{
                copyThis.remove(); //清除复制
                return;
            }
    });

 

### 实现文本超出容器时显示省略号效果 在 Vue 项目中,可以通过 CSS 来实现当文本超出 `div` 容器长度时自动显示省略号的效果。以下是具体的实现方法: #### 使用 CSS 属性组合 为了达到这一目的,可以使用以下三个核心的 CSS 属性[^3]: - **white-space**: 设置为 `nowrap`,防止文字换行。 - **text-overflow**: 设置为 `ellipsis`,表示溢出部分以省略号形式展示。 - **overflow**: 设置为 `hidden`,隐藏溢出的内容。 这些属性需要一起作用才能生效。 ```css .text-ellipsis { white-space: nowrap; /* 防止换行 */ overflow: hidden; /* 隐藏溢出的部分 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` #### 应用于 Vue 组件 可以在 Vue 的模板中定义一个类名并应用该样式。例如,在 `<style>` 标签中添加上述样式,并将其绑定到某个 HTML 元素上。 ```html <template> <div class="container"> <p class="text-ellipsis">{{ longText }}</p> </div> </template> <script> export default { data() { return { longText: "这是一个非常长的文本,超出了容器宽度,应该会显示省略号..." }; } }; </script> <style scoped> .container { width: 200px; /* 设定固定宽度以便观察效果 */ } .text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> ``` 以上代码片段展示了如何通过 Vue 和 CSS 结合的方式实现所需功能。 #### 处理多行文本的情况 如果希望支持多行文本的省略号效果,则需要额外引入 `-webkit-line-clamp` 属性以及一些浏览器兼容性的调整[^4]: ```css .multi-line-text { display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-line-clamp: 3; /* 控制显示几行 */ overflow: hidden; /* 隐藏多余内容 */ text-overflow: ellipsis; /* 添加省略号 */ } ``` 注意:此方案仅适用于 WebKit 浏览器引擎(如 Chrome、Safari),其他浏览器可能不完全支持。 --- #### 总结 无论是单行还是多行文本溢出,都可以借助特定的 CSS 属性轻松完成需求。对于单行文本,推荐使用 `white-space`, `overflow`, 和 `text-overflow`;而对于多行文本,则需结合 `-webkit-line-clamp` 进一步扩展能力。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值