• 文本字数过多时,以省略号显示


    # 文本字数过多时,以省略号显示

    1、对于table中单元格中的字符数超过限定的宽度时,以省略号显示,但是当鼠标悬浮在上面时,能够完整地显示出单元格的内容。
    设置表格的标头中字符数限制(让标头单元格宽度固定)
    ```style
    #dataTab{table-layout: fixed}
    #dataTab th{
    80px;
    white-space: nowrap; //设置如何处理元素内的空白
    word-break:keep-all;//换行规则
    //normal 使用浏览器默认的换行规则。
    //break-all 允许在单词内换行,可以在一个单词内如hello中的hell出换行
    //keep-all 只能在半角空格或连字符处换行,保证字符的完整
    overflow:hidden;
    text-overflow:ellipsis; // clip|ellipsis|string三种取值
    //clip 修剪文本。
    //ellipsis 显示省略符号来代表被修剪的文本。
    //string 使用给定的字符串来代表被修剪的文本。
    }
    ```
    悬浮效果:
    ```style
    #dataTab th:hover
    {
    text-overflow:inherit;
    overflow:visible;
    }
    ```

  • 相关阅读:
    vue的选项
    css(3)基础知识查漏补缺
    总结获取网页相关的一些宽高
    vue的全局api(二)
    vue的全局api
    vue的内部指令
    Java File
    Java File IO学习笔记
    systemctl介绍
    java学习笔记一(20180319)
  • 原文地址:https://www.cnblogs.com/lydialee/p/4025247.html
Copyright © 2020-2023  润新知