zoukankan      html  css  js  c++  java
  • 当屏幕尺寸小于1440,某一行的文字变成省略号

     先获取屏幕高度
     如果小于等于1400;添加一个类
     <div :class="[xiaoyu ? 'isyaoshenglue': ' ' ]"></div>  v-bind结合三目运算,添加一个类名  使用的中括号
     
    如何有省略号  div和p都可以有省略号

    div{
          100px;
        overflow: hidden;
        white-space: nowrap;
       text-overflow: ellipsis;
    }

     
    除了这个方法还有一种方法  使用媒体查询
    我个人喜欢媒体查询

    1. 最大宽度max-width

    “max-width”是媒体特性中最常用的一个特性,指媒体类型小于或等于指定的宽度
    @media screen and (max-width:480px){
     .ads {
         XXXX你写的样似
      }
    }

    2当屏幕在600px~1000px之间时,body的背景色渲染为“#f5f5f5”,  使用关键字and
    @media screen and (min-width:600px) and (max-width:1000px){
      body {background-color:#f5f5f5;}
    }
     
        <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="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;
    }
  • 相关阅读:
    237. Delete Node in a Linked List
    430. Flatten a Multilevel Doubly Linked List
    707. Design Linked List
    83. Remove Duplicates from Sorted List
    160. Intersection of Two Linked Lists
    426. Convert Binary Search Tree to Sorted Doubly Linked List
    142. Linked List Cycle II
    类之间的关系
    初始化块
    明确类和对象
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11839226.html
Copyright © 2011-2022 走看看