table中的td内容超出以省略号显示,需满足的条件是:

<style type="text/css">
  table{
    table-layout: fixed;
    border-collapse:collapse;
    width: 100%;/*自定义*/
  }
  div,td{
    text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  td{border: 1px solid #aaa;}
</style>

<table>
  <tr>
    <td width="">Datcxcvxcvxcvxcvxcvxcvxcvxcvxcva个水电费感受到分公司发到公司分公司电饭锅搭噶十多个是否感受到公司的风格</td>
    <td>
      <div width="200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem ex voluptatum cupiditate voluptates est facere quis nostrum earum iure expedita. Aspernatur dolores expedita nostrum ducimus aperiam doloribus magni beatae qui.</div>
    </td>
    <td width="">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试123123</td>
  </tr>
</table>

效果图:

td内容超出 以…显示的更多相关文章

  1. 表格td内容超出宽度显示... table-layout: fixed;

    td宽度用百分比固定好的时候,即使设置了 white-space:nowrap;/*文本不会换行,在同一行显示*/ overflow:hidden;超出隐藏 text-overflow:ellipsi ...

  2. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  3. html页面内容超出后显示水平滚动条的问题

    这个问题已经遇到好几次,解决起来也熟练了很多.   出现这种问题一般都是html或页面中的某一内部元素宽度超了. 下面总结我遇到的几种情况: 1.某一内部元素width设为100%,然而它还有bord ...

  4. <td>内容超出自动换行

    td 内容自动换行 table表格td设置宽度后文字太多自动换行 设置table 的 style="table-layout:fixed;" 然后设置td的 style=" ...

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

    如何使td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 给table中必须设置属性: table-layout: fixed; 然后给 td 设置: white-spac ...

  6. table中的td内容超出隐藏

    <table style="table-layout: fixed;width: XXX px"> <tr> <td style="whit ...

  7. Div内部的内容超出部分显示省略号(仅仅只有一行内容)

    效果如下:

  8. 当table中的td内容过多,显示不完全,用省略号表示。

    .format{ min-width:100px; max-width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellips ...

  9. DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

随机推荐

  1. 【JavaScript】 命名空间污染解决

    闭包解决命名空间污染问题 var init = (function () { var name = "zhangsan", age = 12, sex = "male&q ...

  2. Java使用google身份验证器实现动态口令验证

    参考: 1)https://www.jb51.net/article/121243.htm 2)https://www.cnblogs.com/wuaili/p/9810661.html

  3. Bugku 杂项 telnet

    letnet 下载zip后发现是一个数据包,放到wireshark中打开 右键追踪tcp流后可以发现flag

  4. 【Java】JavaMail使用网易企业邮箱发邮件

    邮件发送器 /** * 邮件发送器 * * @author Zebe */ public class MailSender implements Runnable { /** * 收件人 */ pri ...

  5. 设计模式学习笔记——Adapter 适配器模式

    适配器设计模式的适应场景: 一般情况是上端固定,下端固定,下端功能不满足或跟上端不协调,使用适配器重新包一层(继承适配器接口,以满足上端需求,继承下层类,以调用方法),使下端代码能满足上端需求(欺骗, ...

  6. [BZOJ1964]hull 三维凸包:计算几何

    分析 发现自己并不会计算几何. 所以先引用一下这位dalao的博客. 二维平面四个点求凸包面积->任选三个点面积之和/2 三维平面五个点求凸包体积->任选四个点体积之和/2 二维平面三个点 ...

  7. Taylor Swift -《Fearless》

    最近网上都搜不到Taylor的歌了,分享一张love best的album给大家,支持霉霉的还是去买正版把~ 专辑曲目: 01. “Jump Then Fall” 03:5702. “Untoucha ...

  8. cdn for js library

    https://cdnjs.com/libraries/jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js htt ...

  9. Ueditor1.4.4 Jsp版本视频上传成功,重新编辑时无法打开、在文本框内无法显示、html源码显示src为空

    1. 编辑 ueditor.config.js 第355行 将 whitList 改为 whiteList 2.编辑ueditor.all.js 注释掉7343.7344.7345行代码,即: var ...

  10. IK词库扩展

    先写个标题,慢慢更新 默认的词库就算最小细粒度分词,很多名词也不会单字分词 比如:阿迪达斯,在IK是一个词,搜索每个字的单字关键词是无结果的,必须搜索阿迪达斯才有结果 所以我们需要扩展词库 IK官方教 ...