用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;/*内联对象需加*/ ...
随机推荐
- 《Go并发编程实战》读书笔记-初识Go语言
<Go并发编程实战>读书笔记-初识Go语言 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在讲解怎样用Go语言之前,我们先介绍Go语言的特性,基础概念和标准命令. 一. ...
- java 中数据的强制转换 和计算的补码运算
原码 反码 补码的定义与运算 1原码: 原码是将十进制或者其他进制的数转换为二进制表示(且要根据数据的类型转换) 如:130 (默认是Int类型,则是4个字节) 原码是:00000000 000000 ...
- java io系列02之 ByteArrayInputStream的简介,源码分析和示例(包括InputStream)
我们以ByteArrayInputStream,拉开对字节类型的“输入流”的学习序幕.本章,我们会先对ByteArrayInputStream进行介绍,然后深入了解一下它的源码,最后通过示例来掌握它的 ...
- R语言学习网址
1. https://www.r-bloggers.com/ 2. https://www.kaggle.com/datasets 3. RStudio download: https://www.r ...
- Process和ProcessBuilder入门【原】
ProcessBuilder优点 ProcessBuilder(XXX).start()和Runtime.exec(XXX)功能相同,主要优点在使用过程中感受有: 前者是jdk1.5后的新方式 配置环 ...
- 绕不开的hadoop
安装 jdk 1.8 # 官网下载可能比较慢,请自行搜索国内镜像源 wget http://download.oracle.com/otn-pub/java/jdk/8u191-b12/2787e4a ...
- vue.cli 中使用 less 来写css样式
vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...
- 开源框架.netCore DncZeus学习(一)npm安装
今天看到一个不错的开源项目DncZeus, https://github.com/lampo1024/DncZeus 整个界面挺漂亮,而且权限做到了按钮级别,功能也较容易扩展,刚好学习VUE纯看文章很 ...
- 堵上NFine SubmitForm漏洞
NFine一个隐藏的漏洞(NFine基本上模仿力软的,力软应该也有,不知道新版本改了没),就是任何登录的用户都可以进行权限修改操作.比如所有模块的SumbitForm或者其它弹出窗口上的按钮,本身只有 ...
- springboot12-zuul
Zuul 相当于是设备和 Netflix 流应用的 Web 网站后端所有请求的前门,提供动态路由,监控,弹性,安全等的边缘服务 所有请求都经过网关(API Gateway)zuul,然后转发到各个子服 ...