zoukankan      html  css  js  c++  java
  • 如何让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;

  • 相关阅读:
    Vuex之state、mapState、...mapState、getters、mapGetters、...mapGetters
    Vuex之store的使用
    vue-router的使用
    Flutter之用SharedPreferences实现本地存储
    Flutter之闪屏页的开发
    Flutter之打乱对象数组
    Flutter之解决页面底部黄色条纹的方法
    Vue条件渲染方式的使用
    vue-i18n实现国际化的语言切换用法
    解决v-for报错的方法
  • 原文地址:https://www.cnblogs.com/jeffry/p/6475605.html
Copyright © 2011-2022 走看看