媒体查询和超出固定宽度显示省略号

原创

朦胧淡月 2022-09-01 17:03:54 博主文章分类：媒体查询 ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

先获取屏幕高度
 如果小于等于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;
}