做项目时，产品提的需求，table表格里面，每一列限制文字超出宽度后显示省略号，等点击td时，文字显示完整，今天整理了一下代码，积累一下

备注：1、邮箱和网址，在td里面不会自动换行，需要增加word-wrap:break-word此属性

　　　2、默认table会超出整个显示屏窗口有滚动条，需要增加table-layout:fixed此属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            html{font-size: 1rem;font-family: Microsoft YaHei, SimHei, Arial, Helvetica, sans-serif;}
            table{border-left:1px solid #ccc;text-align:center;border-collapse:collapse;width: 100%;border-top: 2px solid #00A9C2;}  
            td,th{border:1px solid #ccc;border-width:0 1px 1px 0;margin:2px 0 2px 0;text-align:left;padding: 0.3vw 0.3vw;text-align: center;}  
            tr{height: auto;}
            .tr_detail{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
            th{font-weight:600;font-size:1rem;}
            .email_url{word-wrap:break-word;}
        </style>
    </head>
    <body>
        <table style="table-layout:fixed"><!--table-layout:fixed  如果不设置该属性，table会超出当前窗口，显示滚动条-->
            <tr>
                <th style="width: 14%;">企业名称</th>
                <th style="width: 7%;">主营业务</th>
                <th style="width: 6%;">联系人</th>
                <th style="width: 10%;">联系人手机号码</th>
                <th style="width: 10%;">企业邮箱</th>
                <th style="width: 8%;">企业电话</th>
                <th style="width: 6%;">企业传真</th>
                <th style="width: 11%;">通讯地址</th>
                <th style="width: 6%;">公司性质</th>
                <th style="width: 9%;">企业官网</th>
                <th style="width: 6%;">操作</th>
            </tr>
            <tr class="tr_show">
                <td>北京昌佳泵业有限公司北京昌佳泵业有限公司</td>
                <td>收集收集地方换个间段</td>
                <td>李先生</td>
                <td>15788889999</td>
                <!--邮箱和网址需要加email_url类名，否则不会自动折行-->
                <td class="email_url">marketing@chinabidders.com</td>
                <td>400-6858-688</td>
                <td>400-6858-688</td>
                <td>北京市海淀区华澳中心东侧5楼</td>
                <td>外贸</td>
                <td class="email_url">https://www.chinabidders.com/</td>
                <td><a class="look_button detail_popup" href="#2">查看</a></td>
            </tr>
        </table>
    </body>
</html>
<!--点击tr显示详情-->
<script>
    (function(){
        $($(".tr_show").find("td")).addClass("tr_detail");
    })();
    $(".tr_show").click(function(){
        $($(this).find("td")).toggleClass("tr_detail");
    });
</script>

td默认文字超出后显示..，点击tr时td文字显示完整的更多相关文章

  1. css文字超出后显示...

    多行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; -webkit-lin ...

  2. 赋予option元素点击事件后，点击select时却触发了option事件。如何解决？

    将select的优先级提到option之前就可以了. 方法:为select元素添加position:relative: <select class="adt" name=&q ...

  3. td 中设置超出宽度显示省略号失效

    td测试内容超出显示省略号时,结果没有显示省略号,而是一直往后显示,且超出了td大小,强行挤大了table. 原因是因为td默认不换行. 解决方法: 1.强制td换行. IE加上word-break: ...

  4. table中tr或者td的点击事件

    直接把时间添加到table或者tbody上,只有下面的tr或者td才能促发事件,通过e.target可以获得当前点击tr或者td,这样就可以进行查询或者删除操作了 如果是删除,直接e.target.r ...

  5. 文字超出DIV后,隐藏文字并显示...

    <html> <head> <style type="text/css"> #cs{width:100px;height:50px;line-h ...

  6. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  7. 用户界面样式（cursor，resize，vertical-align，outline，文字超出显示省略号）

    1. 鼠标样式 cursor default: 小白(箭头)默认 pointer:小手 move:移动 text:文本 not-allowed:禁止 2. 轮廓线(表单外发光)outline 给表单添 ...

  8. 点击input时,里面默认字体消失显示

    点击input时,点击input里面默认字体消失显示: <input type="" name="" id="" value=&quo ...

  9. css-文本超出后显示省略号

    1.如果是单行文本: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2.如果是多行文本,将文本框高度设为文字行高的倍数 ...

随机推荐

  1. 【一天一道LeetCode】#101. Symmetric Tree

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  2. OJ题:字符串最后一个单词的长度

    题目描述 计算字符串最后一个单词的长度,单词以空格隔开. 输入描述: 一行字符串,非空,长度小于5000. 输出描述: 整数N,最后一个单词的长度. 输入例子: hello world 输出例子: 5 ...

  3. C语言中的sizeof解析

    1. 定义:sizeof是C/C++中的一个操作符(operator),作用就是返回一个对象或者类型所占的内存字节数.返回 值类型为size_t,在头文件stddef.h中定义.这是一个依赖于编译系统 ...

  4. （十三）UITableView数据模型化

    多组数据的TableView的设计方法:每一组用一个模型对象表示. 模型包含了标题数据和行数据的数组,在控制器里包含模型的组来对各个模型进行初始化. 在tableView相应的方法中,从控制器的模型组 ...

  5. Xcode中的调试工具栏简介

    如下图所示: 从左至右,第一个按钮用来隐藏调试区域. 第二个按钮向你展示断点是否被全局开启或禁用.如果它不是高亮蓝色,则没有断点会被触发. 第三个按钮暂停或继续程序的执行,你一般点击它继续运行到程序的 ...

  6. Android学习之旅-android系统服务的启动过程以及分类（90）

    读了android开发精要这本书,所以我把书中的比较精彩的地方截图了,一块分享一下

  7. android图片加载库Glide

    什么是Glide? Glide是一个加载图片的库,作者是bumptech,它是在泰国举行的google 开发者论坛上google为我们介绍的,这个库被广泛的运用在google的开源项目中. Glide ...

  8. eclipse开发安卓时logcat的绿色加号不见了

    那个绿色加好的作用是添加过滤器的,如果不见了说明你不小心点到了一个按键.恢复方法: 点一下清空logcat日志信息,(右边那个按键)就好了!

  9. Android开发技巧——自定义单选或多选的ListView

    这篇其实应该是属于写自定义单选或多选的ListView的基础教程,无奈目前许多人对此的实现大多都绕了远路,反而使得这正规的写法倒显得有些技巧性了. 本文原创,转载请注明在CSDN上的出处: http: ...

  10. iOS评分功能、APP中打开其他应用程序

    1.评分功能 iOS中评分支持功能开发非常简单. NSString *str = [NSString stringWithFormat: @"itms-apps://itunes.apple ...