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. Python Flask框架入门

    序言 Flask封装功能不及Django完善,性能不及Tornado,但是Flask的第三方开源组件比丰富. 如果你是一个追求极简风格的完美主义者,那么Flask适合你. 资料

  2. 舞蹈课(dancingLessons)

    有n个人参加一个舞蹈课.每个人的舞蹈技术由整数ai来决定.在舞蹈课的开始,他们从左到右站成一排.当这一排中至少有一对相邻的异性时,舞蹈技术相差最小的那一对会出列并开始跳舞.如果相差最小的不止一对,那么 ...

  3. [luogu]P2279 [HNOI2003]消防局的设立[贪心]

    [luogu]P2279 [HNOI2003]消防局的设立 题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两 ...

  4. [HG]钻石游戏diamond 题解

    题面 钻石游戏(diamond) 问题描述: 一个\(M\)行\(N\)列的棋盘,里面放了\(M \times N\)个各种颜色的钻石. 每一次你可以选择任意两个相邻的颜色不同的钻石,进行交换.两个格 ...

  5. $FFT/NTT/FWT$题单&简要题解

    打算写一个多项式总结. 虽然自己菜得太真实了. 好像四级标题太小了,下次写博客的时候再考虑一下. 模板 \(FFT\)模板 #include <iostream> #include < ...

  6. Swift权限控制

    最后更新:2017-03-20 private: 只能在当前类里面访问 fileprivate: 只能在当前文件内访问 internal:internal访问级别所修饰的属性或方法在源代码所在的整个模 ...

  7. 存在不同浏览器间的JS兼容总结

    2016年2月19日个人博客文章--迁移到segmentfault 当我们在编写JS用于处理事件时,由于考虑到不同浏览器间Js代码兼容不同,代码不易记忆,于是做出如下整理.(当然以后还会增加更新的.. ...

  8. 基于python实现自动化办公学习笔记三

    Excel(1)写xls文件 # 有序字典from collections import OrderedDict# 存储数据from pyexcel_xls import save_data def ...

  9. Python编程:从入门到实践—类

    创建类 #!/usr/bin/env python# --*-- encoding:utf-8 --*-- class Dog(): """一次模拟小狗的简单尝试&quo ...

  10. Socket 网络编程实践经验

    目录 目录 相关文章 Socket 与 HTTP 的区别 生产实践考虑 网络断开重连问题 Heartbeat 心跳机制 使用非阻塞模式下的 select 函数进行 Socket 连接检查 会话过期问题 ...