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>
  • 相关阅读:
    Ant构建原理及build.xml文档描述
    Selenium WebDriver的工作原理
    appium工作原理
    jmeter获取mysql数据并作为请求参数使用
    linux sar的使用
    hdu 1520 Anniversary party
    hdu 1331 Function Run Fun
    hdu 1208 Pascal's Travels
    hdu 1159 Common Subsequence
    poj 1129 Channel Allocation
  • 原文地址:https://www.cnblogs.com/lzfj/p/11463333.html
Copyright © 2011-2022 走看看