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>
  • 相关阅读:
    HTML5中的canvas
    预解释
    asp.net中的CheckBox控件的使用
    jQuery 效果
    常用的 jQuery 事件
    轮播图
    迭代器与生成器
    js对象拷贝
    事件循环、同步异步、宏任务微任务
    Vue 的 keep-alive 组件缓存
  • 原文地址:https://www.cnblogs.com/lzfj/p/11463333.html
Copyright © 2011-2022 走看看