• 如何让html中的td文字只显示部分


    以下笔记有待测试

    ————————————————————

    <table style="table-layout:fixed">

    <tr>

    <td style='white-space:nowrap;overflow:hidden;text-overflow: ellipsis;'>

    </td>

    </tr>

    </table>  

    HTML如何让table中的td内容过长显示为固定长度,多余部分用省略号代替

    这个问题呢,是由于我们公司测试的部门测出来的,虽然说测试的内容本身就是个BUG,不过这个也让我学到了一个比较好的归类于布局的一个小技巧,就是将td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替。

    方式如下:

           这个功能有一个前提,在table中必须设置style:

    table-layout: fixed;

     这条属性就是让table的内部布局固定大小。这个时候就用width属性调节td的长度。

    之后在添加如下:

    <style>

    td {

          white-space:nowrap;overflow:hidden;text-overflow: ellipsis;

    }

    </style>

    属性描述

    white-space:nowrap;规定段落中的文本不进行换行
    overflow:hidden;关闭滚动条
    text-overflow: ellipsis;溢出的文字显示为省略号
    
    

    这个时候你会发现,就算变成了省略号,就会出现不知道内容完整的是什么?

    所以这个时候可以考虑使用td的title属性,在title属性中设置内容为显示内容,这样只要光标停留在td处就可以显示全部的内容,如果觉得这个不够劲。可以考虑自己写一个mouseover事件,让内容全部显示,显示的方式是自动换行,如果不换行就会出现很难看的样式。

    so:换行也需要table-layout: fixed;

    在(IE浏览器)长串英文自动回行

    方法1:同时加入word-wrap:break-word;

    table{

            table-layout:fixed;word-wrap:break-word;

  • 相关阅读:
    Chrome开发者工具中Elements(元素)断点的用途
    最简单的SAP云平台开发教程
    Java实现 LeetCode 495 提莫攻击
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 492 构造矩形
  • 原文地址:https://www.cnblogs.com/jeffry/p/6475605.html
Copyright © 2020-2023  润新知