zoukankan      html  css  js  c++  java
  • 单行、多行文本溢出以省略号显示

    //单行文本溢出

    .one{ 

       200px;

      border: 1px solid #000;

      overflow: hidden;  //溢出文本隐藏

      text-overflow: ellipsis;  //溢出文本显示省略号

      white-space: nowrap; //强制不换行

    }

    // 多行溢出 只能在手机端使用 在PC端使用会有兼容

    <p class="one">
    我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字
    </p>
    .two{

       200px;

      border: 1px solid #000;

      display: -webkit-box; //必须的属性 ,将对象作为弹性伸缩盒子模型显示 

      -webkit-line-clamp: 5;  // 设定在哪一行显示省略号

      -webkit-box-orient: vertical;  //必须的属性 ,设置或检索伸缩盒对象的子元素的排列方式 

      overflow: hidden;  //溢出文本隐藏

      text-overflow: ellipsis;  //溢出文本显示省略号

    }
     
    <p class="two">
    我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字
    我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字
    我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字
    </p>
  • 相关阅读:
    C# json转对象
    sit、qas、dev、pet
    vs professional 2019 离线安装包下载方法
    C# SHA512和Base64加解密方法
    C#获取客户端Ip工具类
    C#xml泛型序列化
    C#对象转换工具类
    C#记录日志到本地文件工具类
    05 Activity生命周期
    05 利用Appliction 传值Activity
  • 原文地址:https://www.cnblogs.com/lzfj/p/11463333.html
Copyright © 2011-2022 走看看