用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;/*内联对象需加*/ ...
随机推荐
- JavaSE_坚持读源码_HashSet对象_Java1.7
对于 HashSet 而言,它是基于 HashMap 实现的,HashSet 底层采用 HashMap 来保存所有元素,因此 HashSet 的实现比较简单,查看 HashSet 的源代码,可以看到如 ...
- NGUI-实例化问题
大家好,我是蜀云泉,我的博客存在的不足之处,希望大家包涵. 我在研究NGUI的时候发现一个问题.在NGUI下实例化物体,其坐标总是位于原点,也就是UIRoot的(0,0,0)处,困惑了好几天我才发现N ...
- python 面向对象(四)反射
####################总结########## 1. isinstance: 判断xxx是否是xxx类型的(向上判断) type: 返回xx对象的数据类型 issubclass: 判 ...
- golang json序列化
结构体序列化 func main() { var j = js{ Name: "zhangsan", Age: 16, Sal: 1500.3, Intro: "aiha ...
- springcloud 服务调用的两种方式
spring-cloud调用服务有两种方式,一种是Ribbon+RestTemplate, 另外一种是Feign.Ribbon是一个基于HTTP和TCP客户端的负载均衡器,其实feign也使用了rib ...
- 【1】【leetcode-99】 恢复二叉搜索树
(没思路) 99. 恢复二叉搜索树 二叉搜索树中的两个节点被错误地交换. 请在不改变其结构的情况下,恢复这棵树. 示例 1: 输入: [1,3,null,null,2] 1 / 3 \ ...
- Django ORM操作的几个细节
1. __gte: 大于等于 Book.objects.filter(price__gt=100) # 查询price大于等于100的记录 2. __range: 顾头也顾尾,相当于between.. ...
- 学习go语言编程系列之定义变量
package main import ( "fmt" "math") func main() { // 1. 定义变量名age,不初始化,使用对应类型的默认值 ...
- 50个最常用的Linux命令
转载至:http://gywbd.github.io/posts/2014/8/50-linux-commands.html tar grep find ssh sed awk vim diff so ...
- Native/Webview bridge for Hybrid
Native/Webview bridge for Hybrid 安装 npm i --save webview-bridge 特点 支持自定义app URL scheme 支持多种处理方式(全部涵盖 ...