当屏幕尺寸小于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,某一行的文字变成省略号的主要内容,如果未能解决你的问题,请参考以下文章

当屏幕尺寸小于特定尺寸时隐藏 div 元素

如何将多余的文字变成省略号 JS代码

将td中文字过长的部分变成省略号显示的小技巧

标签内显示文字超过行宽度显示省略号

第一行代码--笔记

怎样td里面的字显示一行,不换行