在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况;但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overflow:hidden;属性也不行;最后找的的解决方案如下:

table{

    table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
如果担心隐藏了看不到完整的单元格内容建议在单元格上面加上title属性值就是单元格的完整内容这样只要鼠标经过就能显示全部了

解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号的更多相关文章

  1. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  2. 解决element-ui表格表头内容太长时的换行问题

    在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...

  3. css强制换行和超出隐藏实现

        一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...

  4. css强制换行和超出部分隐藏实现

    一.强制换行 1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 whi ...

  5. CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...

  6. css 文本超出n行就隐藏并且显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  7. 解决Linux CentOS中cp -f 复制强制覆盖的命令无效的方法

    Linux下默认cp命令是有别名的(alias cp='cp -i'),无法在复制时强制覆盖,即使你用 -f 参数也无法强制覆盖文件,下面提供几个从网上找的Linux下cp命令覆盖的方法. 1)取消c ...

  8. 怎样让HTML 表格中内容自动换行??

    <table style="word-break:break-all; word-wrap:break-all;">

  9. table内容超出宽度时隐藏并显示省略标记

    HTML中,一个表格,要达到二个条件: 1.内容多了不自动换行: 2.固定单元格宽度.如果内容超出,则隐藏: 如 果在IE下,只是写成<table style="table-layou ...

随机推荐

  1. redis session共享中的序列化问题

    今天在做session对象存入redis(set方法)时,碰到一个空指针异常,代码如下: public class CheckAccount extends HttpServlet { public ...

  2. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  3. javascript学习总结(二):DOM常用方法。

    1 获取元素节点 a document.getElementById(id),它返回一个对象.是Document对象特有的函数,它还有这些方法: b element.getElementsByTagN ...

  4. APP账号密码传输安全分析

            最近在搞公司的安卓APP测试(ThinkDrive 企邮云网盘)测试,安卓app测试时使用代理抓包,发现所此app使用HTTP传输账号密码,且密码只是普通MD5加密,存在安全隐患,无法 ...

  5. java nio之SocketChannel

    Java NIO中的SocketChannel是一个连接到TCP网络套接字的通道.可以通过以下2种方式创建SocketChannel: 打开一个SocketChannel并连接到互联网上的某台服务器. ...

  6. Git学习笔记(二)

    一.创建远程仓库(GitHub) 1.GitHub网站地址:https://github.com/,这个网站就是提供Git仓库托管服务的,所以,只要注册一个GitHub账号,就可以免费获得Git远程仓 ...

  7. 【Swift学习】Swift编程之旅---枚举(十二)

    枚举为一组相关的值定义一个共同的类型,并允许您在代码中的以类型安全的方式中使用这些值,在 Swift 中,枚举类型是一等(first-class)类型.它们采用了很多传统上只被类所支持的特征,例如计算 ...

  8. 脚本引用中的defer和async的用法和区别

    之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...

  9. MySql安装出现问题---无服务,修改密码

           之前在项目中一直使用的是SqlServer数据库,现在学习下MySql,下面是学习MySql的学习笔记. MySql简介       MySql是一种关联数据库管理系统(关系型),将数据 ...

  10. C#基础02

    学习"传智播客视频基础"做的课堂笔记,您有幸读到,若其中有错误部分,请您务必指明.另外请给出您的宝贵建议,谢谢. **************基础知识************ 1: ...