用css解决table文字溢出控制td显示字数
场景:
最左边这栏我不行让他换行,怎么办呢?
下面是解决办法:
- table{
- width:100px;
- table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
- }
- td{
- width:100%;
- word-break:keep-all;/* 不换行 */
- white-space:nowrap;/* 不换行 */
- overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
- text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用*/
- }
参考:http://www.52design.com/html/201007/design201071123721.shtml
现在:
用css解决table文字溢出控制td显示字数的更多相关文章
- 用css解决table文字溢出控制td显示字数(转)
场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义 ...
- Css解决表格超出部分用省略号显示
小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...
- css+div解决文字溢出控制显示字数
一.一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/widt ...
- 【css】table标签内的td、th如何设置固定宽度,而不是自适应?
table{ min-width: %; } td{ min-width: 100px; } .table-container{ overflow:auto; display: block; } &l ...
- css解决多行溢出显示省略号
多行溢出 仅作为记录方便查找 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: number; /*n行溢 ...
- -webkit-line-clamp下多行文字溢出点点点...显示实例页面
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box ...
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- table不让td中文字溢出操作方法
table不让td中文字溢出操作方法 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } t ...
- CSS 文本和表格中文字溢出显示省略号
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
随机推荐
- Hbase学习01
1.1 快速介绍 1.1.1 快速入门,单节点Hbase 本小节介绍单节点独立HBase的设置. 独立实例包含所有HBase守护进程 - Master,RegionServers和ZooKeeper ...
- 利用salt搭建hadoop集群
自动化工具有很多..今天总结一下salt安装hadoop 步骤,学习过程. 1,机器列表 hosts文件 只需要将namenode的两台机器上配置 ,不解释了. 2.salt-master在10 ...
- Eclipse xml中自动提示,添加 dtd或xsd依赖
下载DTD或XSD文件 添加到Eclipse
- jQuery使用(四):DOM操作之查找兄弟元素和父级元素
查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...
- spring注解第05课 FactoryBean
1.工厂bean调用 @Configuration public class MainConfig2 {/** * 使用Spring提供的 FactoryBean(工厂Bean); * 1).默认获取 ...
- 哪些领域适合开发微信小程序
什么是小程序?小程序的实质就是webapp,最典型的案例是接入微信的“滴滴打车”.虽然没有下载安装APP,但通过微信完全可以正常使用滴滴打车的服务,需要的定位.支付等底层能力,微信都可以提供. 张小龙 ...
- jQuery漏洞
1.使用jQuery.append().jQuery.html()方法时,如果其中内容包含<script>脚本而没有经过任何处理的话,会执行它. 2.版本低于1.7的jQuery过滤用户输 ...
- 解决shell脚本中 telnet ap自动输入用户名和密码以及回车符
#!/bin/bash function change_ap { ( s=`stty -g`; str=$"\n" sstr=$(echo -e $str) stty raw -e ...
- DOM操作插入新的子节点
appendChid.insertBefore首先这两个方法都是添加子节点. append(追加),appendChid:给父节点的子节点末尾添加子节点. insertBefore(newNode, ...
- ng directive compile pre-link post-link
原文链接: http://www.jb51.net/article/58229.htm 1.ng在link之前编译所有的指令,然后link又分为 pre-link 与 post-link阶段compi ...