table表格超出部分显示省略号
做table表格时,某一列字数比较多,希望超出宽度的部分以省略号显示
设置table的布局 默认automatic 以表格内容显示相应宽度 改成fixed 以表格列宽显示内容
table{
table-layout: fixed;
}
在需要设置列加上
<td style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
white-space:nowrap; 文本以单行显示,不换行
overflow:hidden; 超出部分隐藏
text-overflow:ellipsis; 超出部分以省略号显示
如果想让鼠标放在上边显示全部内容,把td里的内容放在div里,加上title属性
<div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${item.REMARK}">${item.REMARK}</div>
div的title属性和div的内容相同
table表格超出部分显示省略号的更多相关文章
- Css解决表格超出部分用省略号显示
小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- css 超出部分显示省略号
代码: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- IVIEW对的table组件超出长度用省略号代替,使用气泡提示。
render: (h, params) => { return h('div', [ h('Tooltip', { props: { placement: 'top' } }, [ h('spa ...
- HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器
1,公共样式,在公共的 CSS 文件中加入以下内容 /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- css文本强制两行超出就显示省略号,不显示省略号
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...
随机推荐
- Cell complex单元复合形
概念 (1)Piecewise linear complex (PLC) 分段线性复合形 (2)Cell complex 单元复合形 [1] (元胞复合形) (3)Linear Cell Comple ...
- maven 转myeclipse eclipse 项目 命令
我们在网上下载的开源Maven工程想要转换成Eclipse能够识别的工程,需要执行如下命令: Jar工程: mvn eclipse:eclipse 或 mvn eclipse:myeclipse We ...
- leetcode 22括号生成
非常好的一道题.一开始的思想是这样的,先把n对括号按照某一顺序生成一个string,然后用全排列算法生成所有可能,然后利用stack写一段判断括号是否匹配的字符串,匹配的假如结果中.不过会超时.因为全 ...
- android 通过页面上关键字快速定位代码
这里定位微信关于页面, 当然可以直接获取当前最顶层activity 反编译apk后 搜索 strings.xml,找到对应id 搜索文件到用到id对应的成员变量,通常 是在R*.smali文件中 字符 ...
- Windows(华硕/联想)笔记本上安装黑苹果与win双系统教程
声明:电脑小白者请谨慎安装,如有需要可私聊或留言提供安装工具 首先说明:Windows PC的文件操作系统也就是磁盘格式是FAT32或 NTFS ,而 Mac 的文件操作系统格式是 HFS ,所以这时 ...
- What is the reason for - java.security.spec.InvalidKeySpecException: Unknown KeySpec type: java.security.spec.ECPublicKeySpec
支付中心Project重构完成,经过本地测试,并未发现问题.发布到测试环境后,测试发现请求光大扫码https接口时,出现了如下的异常: javax.net.ssl.SSLException: Serv ...
- obv15 实例6:如果K线柱过多,ZIG将发生变动,导致明显的OBV15指标被隐藏!
obv
- SSH异常处理(一)
Could not locate getter method for property [com.test_SSH.Employee#createTime] 这个异常是实体类没有映射到对应的.hbm. ...
- Docker下操作指令
Docker下操作指令 以mysql为例 1.搜索镜像: #docker search mysql 2.拉取镜像 #docker pull mysql:5.7 3.加载镜像并绑定端口: #docker ...
- Unity shader学习之逐像素漫反射光照模型
shader如下: Shader "Custom/Diffuse Fragment-Level" { Properties { _Diffuse (,,,) } SubShader ...