table表格中的内容溢出布局方式
什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替。
这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一行显示过长或者自动换行。可是有的时候我们就想在固定宽度的一行中显示,如果多出的部分那就用点点点代替,这样就不会撑乱表格了。那么该如何做呢?
一般来说我们会用到如下属性
/*溢出部分样式*/
.txt-ell {
white-space:nowrap; //强制在一行显示
overflow:hidden; //溢出的内容切割隐藏
text-overflow:ellipsis; //当内联溢出块容器时,将溢出部分替换为…
word-break:keep-all; //允许在单词内换行
color: red; //这里我自己标识一下
padding: 0 7px; //由于想跟边线留有距离,所以设置了下
}
.table-fix {
table-layout:fixed;
}
首先第二个样式是专门给table标签加的,想要实现内容溢出,那么表格必须有固定的宽高,表格内部的tr,td也要有固定的宽高。在用内容溢出之前,先要给table添加table-fix这个类。然后检查自己的tr,td有没有给width,如果没有的话,最好是给个吧,固定的也行,百分比的也行,我主要给的百分比,外边table给固定宽度,里面的tr和td就是百分比的宽度,这样才能使用内容溢出样式。最后如果哪个格子里面的内容非常的多,你想实现点点点,就给这个格子添加一个.txt-ell的类吧
table表格中的内容溢出布局方式的更多相关文章
- 根据excel表格中的内容更新Sql数据库
关于[无法创建链接服务器 "(null)" 的 OLE DB 访问接口 SQL Server 2008读取EXCEL数据时,可能会报这个错误:无法创建链接服务器 "(nu ...
- table表格整体居中 和 table表格中各行各列内容居中
1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- CSS3中更灵活的布局方式
flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果. flex布局与常规布局截然不同,常规布局虽然 ...
- 自设table表格,获取内容,并经弹出框的url传参,获取结果显示在弹出框,并加载合计
table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...
- 在table表格中实现圆角效果
在table中设置border-radius发现不起作用,网上查找了一番,原因是border-collapse:collapse和border-radius不兼容. 设计图效果 代码实现效果: < ...
- vue+element-ui:table表格中的slot 、formatter属性
slot 插槽,table中表示该行内容以自定义方式展示 :formatter 方法,用来格式化内容 Function(row, column, cellValue, index) html < ...
- 5种做法实现table表格中的斜线表头效果
table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...
- table表格中加入<a>标签,使内容上下居中的方法。
主要思路:定义好表格单元格的width和height,再加入<a>后,设置<a>的width=100%,height=100%填充整个单元格.那么此时设置上下左右居中样式就只需 ...
随机推荐
- 我人生中的jQuery选择器
Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...
- css基础样式四
上次我们讲到了相对定位: 这次我们了解下绝对定位; 绝对定位: #box_relative { position: absolute; left: 30px; top: 20px; } 绝对定位会脱离 ...
- c++打开浏览器
调用外部命令 如果用默认浏览器,就调用ShellExecute(NULL, _T("open"), _T("explorer.exe"), _T("h ...
- Appium 关于如何获取 apk 包名即 appPackage 和 appActivity
方法2: a.启动待测apk b.开启日志输出:adb logcat>D:/log.txt c.关闭日志输出:ctrl+c d.查看日志 进入通过adb 连接上设备以后,通过如下命令查看包名 C ...
- 关于GDB使用
编译时要加上 -g 才可以提供给gdb符号信息. 启动: $gdb (target-program) 单步执行: $n 设断点: 1.程序入口 $break (functionname()) 2.行 ...
- 新项目CRM(1)
<title>CRM登陆</title> <script type="text/javascript"> if (window.parent.w ...
- PDO操作数据库
- mysql中文乱码问题解决
在mysql5.0以上,中文乱码不能用网上的大多数方法,我用网上改编码的问题,让我mysql服务器再也起不起来了. 我用的mysql5.7.16绿色免安装版. 在根目录下的配置文件里my.ini(或者 ...
- java归并排序,单线程vs多线程
一.什么是归并排序 归并排序又称合并排序,它是成功应用分治技术的一个完美例子.对于一个需要排序的数组A[0..n-1],归并排序把它一分为二:A[0..n/2-1]和A[n/2..n-1],并对每个子 ...
- Vim 常用技巧:
Vim 常用技巧: 将回车由默认的8个空格改为4个空格: 命令:set sw=4 修改tab为4空格: 命令:set ts=4 设置每一级的缩进长度: 命令:set shiftwidth=4 设置文件 ...