先获取屏幕高度
如果小于等于1400;添加一个类
<div :class="[xiaoyu ? 'isyaoshenglue': ' ' ]"></div> v-bind结合三目运算，添加一个类名 使用的中括号
如何有省略号 div和p都可以有省略号
div{ width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
除了这个方法还有一种方法 使用媒体查询
我个人喜欢媒体查询
1. 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，指媒体类型小于或等于指定的宽度
/* 小于或等于指定的宽度599px;出现紫色 */ @media screen and (max-width:599px) { div { height: 100px; background-color: blueviolet; } }
2当屏幕在600px~1000px之间时，body的背景色渲染为“#f5f5f5”， 使用关键字and
/* 当屏幕在600px~1000px之间时(包含600px和1000px)； 需要注意的是:媒体查询的css;需要放置在其他非媒体查询的后面 否者媒体查询可能会出现不生效这样的情况 媒体查询有可能在其他浏览器上出现怪异现象(比如说 2345浏览器) */ @media screen and (min-width:600px) and (max-width:1000px){ body {background-color:#f5f5f5;} }
出现滚动条
html { /* 最小宽度小于900px，出现滚动条;等于900px,不会出现滚动条 */ min-width: 900px; overflow-x: auto; } <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; }
