我们可以先给表格 table上 固定一个宽度 不让表格撑破

width: 747px;    table-layout:fixed;

然后我们在td上加上如下样式

 style="width:100px;overflow:hidden;white-space:nowrap;word-break:keep-all;"

最后达到的效果如下

 

 

 

英文 数字 不换行 撑破div容器

我们在div等容器 中,如果规定了宽度,并且里面的内容不是全英文或者全数字是OK的,会自动换行,但是如果是全数字或者是全英文,则会撑破容器,如图

解决方法

word-wrap:break-word;word-break:break-all;

td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效,英文 数字 不换行 撑破div容器的更多相关文章

  1. td中使用overflow:hidden; 无效解决方案

    td中使用overflow:hidden; 无效解决方案 >>>>>>>>>>>>>>>>>> ...

  2. css中设置table中的td内容自动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...

  3. [转]对 td 使用 overflow:hidden; 无效的几点错误认识

    转载:http://www.cftea.com/c/2010/12/UVBUCD0J888L2XPQ.asp 一.是 td 的原因. 其实这关 td 什么事呢?div 也是一样的,看示例: <d ...

  4. td 内容自动换行 table表格td设置宽度后文字太多自动换行

    设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可   ...

  5. 当Table中td内容为空时,显示边框的办法

    1. 在 table的css里面加: border-collapse:collapse;在 td 的css里面加: empty-cells:show; 2 .最简单的就是 在TD里写个    说明: ...

  6. css 超过宽度显示...

    一般使用 display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; *****************未实验 ...

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

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

  8. css控制英文内容自动换行問題

    css控制英文内容自动换行 HTML: <!-- 因为要显示的内容是用户通过CMS添加进入数据库,再抓取出来前台显示的,所以你根本无法 控制每一行内容的长度. 所以我在显示内容的div设置了一个 ...

  9. Jlabel实现内容自动换行

    Jlabel实现内容自动换行 摘自:https://blog.csdn.net/zhhtao89/article/details/50179695   2015年12月04日 21:09:27 阅读数 ...

随机推荐

  1. 虚拟机备份转移后,网络启动异常,提示“SIOCSIFADDR: No such device”的解决方案

    虚拟机管理软件:Oracle VirturalBox Manager 4.0.8 虚拟机:Ubuntu Server 10.10 i386 The problem lies in the fact t ...

  2. 1891: 丘比特的烦恼 - BZOJ

    Description 随着社会的不断发展,人与人之间的感情越来越功利化.最近,爱神丘比特发现,爱情也已不再是完全纯洁的了.这使得丘比特很是苦恼,他越来越难找到合适的男女,并向他们射去丘比特之箭.于是 ...

  3. Netty 中文教程 Hello World !详解

    1.HelloServer 详解 HelloServer首先定义了一个静态终态的变量---服务端绑定端口7878.至于为什么是这个7878端口,纯粹是笔者个人喜好.大家可以按照自己的习惯选择端口.当然 ...

  4. ios Camera学习笔记

    检测设备的摄像头是否可用: - (BOOL) isCameraAvailable{ return [UIImagePickerController isSourceTypeAvailable: UII ...

  5. 剑指offer--面试题15--相关

    感受:清晰的思路是最重要的!!! 题目:求链表中间节点 ListNode* MidNodeInList(ListNode* pHead) { if(pHead == NULL) return NULL ...

  6. [转载]DateTime TryParse

    今天被Architect问住了,说你光用一个TryParse就判断人家是不是时间日期型的,是不完整的.所以我花点时间看了下TryParse的用法. MSDN:http://msdn.microsoft ...

  7. c++ 钻石继承

    在C++中,什么叫做钻石问题(也可以叫菱形继承问题),怎么避免它? 下面的图表可以用来解释钻石问题. 假设我们有类B和类C,它们都继承了相同的类A.另外我们还有类D,类D通过多重继承机制继承了类B和类 ...

  8. Deep Learning and Shallow Learning

    Deep Learning and Shallow Learning 由于 Deep Learning 现在如火如荼的势头,在各种领域逐渐占据 state-of-the-art 的地位,上个学期在一门 ...

  9. Tesseract-OCR牛刀小试:模拟请求时的验证码识别

    原文:http://yaohuiji.com/tag/tesseract%EF%BC%8Cocr%EF%BC%8C%E9%AA%8C%E8%AF%81%E7%A0%81/ 有个邪恶的需求,需要识别验证 ...

  10. Proxmox虚拟机增加硬盘容量

    1.首先在虚拟机控制台选择调整硬盘容量,弹出窗口为增加的容量 2.重启虚拟机,用fdisk –l查看新增容量是否被识别 3.用cfdisk创建分区,分区格式为Primary 8e (Linux LVM ...