• 溢出文本显示三个点


    有时候会有溢出文本省略,然后显示三个点的要求。

    需要注意:

      1、一定要给容器设置 宽度。

      2、容器不能是flex布局,需要改为 block 或者 inline-block。

    单行文本时,只需要给元素设置下面属性(需要先设置容器宽度):

    1 overflow: hidden;
    2 text-overflow: ellipsis;
    3 white-space: nowrap;

    多行文本显示时:

    1 overflow: hidden;
    2 text-overflow: ellipsis;
    3 /* 仅仅使用于 webkit内核 */
    4 display: -webkit-box;
    5 -webkit-line-clamp:2; /* 要显示的行数 */
    6 -webkit-box-orient:vertical;

    或者利用元素模拟:

     1     .box3{
     2         display: inline-block;
     3         height: 40px;
     4          800px;
     5         line-height: 20px;
     6         overflow: hidden;
     7         position: relative;
     8     }
     9     .box3 .span{
    10         margin-left: 20px;
    11         position: absolute;
    12         right: 0;
    13         bottom: 0;
    14     }

    或者利用一张图片模拟,利用绝对定位定位到右下角。

  • 相关阅读:
    python之高阶函数
    [第二版]多线程的发送与接收
    基本函数与结构
    unp.h
    gdb调试命令
    System V共享内存区
    Posix 共享内存区
    System V信号量
    Posix 信号量
    记录锁
  • 原文地址:https://www.cnblogs.com/xguoz/p/9069941.html
Copyright © 2020-2023  润新知