zoukankan      html  css  js  c++  java
  • css实现文本溢出显示省略号

    单行文本

    单行文本溢出显示省略号比较简单,主要就三行代码。

    p {
         300px;
        overflow: hidden;
        /*文本不会换行*/
        white-space: nowrap;
        /*当文本溢出包含元素时,以省略号表示超出的文本*/
        text-overflow: ellipsis;
      }
    

    效果:

    多行文本

    • 方法一
      对于多行文本,一种方法是使用webkit的css扩展属性,该方法适用于Safari、chrome和大多数移动端浏览器。
    p {
         300px;
        overflow: hidden;
        /*将对象作为弹性伸缩盒子模型显示*/
        display: -webkit-box;
        /*设置子元素排列方式*/
        -webkit-box-orient: vertical;
        /*设置显示的行数,多出的部分会显示为...*/
        -webkit-line-clamp: 3;
      }
    

    效果:

    • 方法二
      使用伪元素实现,将伪元素放在最后一个字的上方,达到显示省略号的目的。该方法兼容性较好,但文字未超出的情况下也会出现省略号。
    p {
        position: relative;
        line-height: 1.2em;
        max-height: 3.6em;
         300px;
        /*设置文本为两端对齐*/
        text-align: justify;
        overflow: hidden;
      }
      
      p::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        /*将省略号的大小设置为1个字体大小*/
         1em;
        /*设置背景,将最后一个字覆盖掉*/
        background: #fff;
      }
    

    效果:

    p {
         300px;
        max-height: 3em;
        text-align: justify;
        overflow: hidden;
    }
    
    // js部分代码
    $(document).ready(function() {
      $("p").dotdotdot();
    });
    

    效果:

  • 相关阅读:
    【001】JS解析,反解析XML的一些问题
    [ Java面试题 ]并发篇
    [ Java面试题 ]WEB篇
    [ Java面试题 ]算法篇
    [ Java面试题 ]数据库篇
    [ Java面试题 ]泛型篇
    [ Java面试题 ]多线程篇
    [ Java面试题 ]持久层篇
    Java开发岗面试知识点解析
    [ SSH框架 ] Spring框架学习之二(Bean的管理和AOP思想)
  • 原文地址:https://www.cnblogs.com/yangrenmu/p/7400462.html
Copyright © 2011-2022 走看看