码迷,mamicode.com
首页 > 其他好文 > 详细

当屏幕尺寸小于1440,某一行的文字变成省略号

时间:2019-11-12 00:30:33      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:box   ons   屏幕高度   his   添加   bar   stroke   dde   括号   

 先获取屏幕高度
 如果小于等于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,某一行的文字变成省略号

标签:box   ons   屏幕高度   his   添加   bar   stroke   dde   括号   

原文地址:https://www.cnblogs.com/IwishIcould/p/11839226.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!