zoukankan      html  css  js  c++  java
  • 溢出文本显示三个点

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

    需要注意:

      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     }

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

  • 相关阅读:
    JVM参数配置
    域渗透命令
    相对路径绝对路径
    ESPCMS的CSRF添加管理员账号
    nmap脚本nse的使用
    Nmap简单的漏扫
    MS08-067
    lcx用法
    给自己的服务器传文件 转自别人
    突破大文件上传 和内网ip的端口转发
  • 原文地址:https://www.cnblogs.com/xguoz/p/9069941.html
Copyright © 2011-2022 走看看