当屏幕尺寸小于1440,某一行的文字变成省略号
Posted iwishicould
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当屏幕尺寸小于1440,某一行的文字变成省略号相关的知识,希望对你有一定的参考价值。
先获取屏幕高度
如果小于等于1400;添加一个类
<div :class="[xiaoyu ? ‘isyaoshenglue‘: ‘ ‘ ]"></div> v-bind结合三目运算,添加一个类名 使用的中括号
如何有省略号 div和p都可以有省略号
div{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="progress-bar-box">
<div class="progress-bar-box-div">
<div :class="[xiaoyu ? ‘isyaoshenglue‘: ‘‘]">人脸签到</div>
<el-progress
:text-inside="true"
:stroke-width="10"
:percentage="70"
style="width:160px"
class="progress-bar"
></el-progress>
</div>
<div class="progress-bar-box-dec">35/35</div>
</div>
在data中定义一个
data:{
pingWidth: "",
xiaoyu: false //是否要省略
}
mounted() {
this.pingWidth = document.documentElement.clientWidth;
console.log("pingkuan", this.pingWidth);
if (this.pingWidth <= 1400) {
console.log("1");
this.xiaoyu = true;
}
},
.isyaoshenglue {
width: 55px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
以上是关于当屏幕尺寸小于1440,某一行的文字变成省略号的主要内容,如果未能解决你的问题,请参考以下文章