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. ...
随机推荐
- poi 实战代码---导出Excel(根据模板导出)
/** * 导出excel * @param request * @param response * @return * @throws Exception */ @RequestMapping(&q ...
- PHP中MySQL、MySQLi和PDO的用法和区别
PHP的MySQL扩展(优缺点) 设计开发允许PHP应用与MySQL数据库交互的早期扩展.mysql扩展提供了一个面向过程 的接口: 并且是针对MySQL4.1.3或更早版本设计的.因此,这个扩展虽然 ...
- VMware下安装Ubuntu18.04时vmware tools安装问题
在VMware下安装Ubuntu18.04时vmware tools关键步骤: 1.快捷键Ctrl+Alt+T,启动命令框,然后切换到root用户(切换命令为:sudo su,回车然后会提示你输入当前 ...
- JS发送短信验证码
<div> <input type="tel" id="mobile" name="mobile" placeholder ...
- java基础(一) -语法
基本语法 编写Java程序时,应注意以下几点: 大小写敏感:Java是大小写敏感的,这就意味着标识符Hello与hello是不同的. 类名:对于所有的类来说,类名的首字母应该大写.如果类名由若干单词组 ...
- unity3d-游戏实战突出重围,第一天
此游戏是根据书上一步一步敲的.是一个入门级别的游戏. 游戏状态机 说到游戏状态机,就不得不提到开发中最常用的MVC模式. MVC模式的全称是Model-View-Cont ...
- Visio 保存卡死解决办法
右键Visio图标 属性--兼容性--以兼容模式运行这个程序 要打上对勾 且下面的系统版本要选和你电脑版本一致的选项 特权等级 以管理员身份运行次程序 要打上对勾
- CG标准函数库
(1)数学函数 函数 功能描述 abs(x) 返回输入参数的绝对值 acos(x) 反余切函数,输入参数范围为[-1,1], 返回[0,π]区间的角度值 all(x) 如果输入参数均不为0,则返回tu ...
- armv8 memory translation table descriptor
上一节大致给出了descriptor的结构,这篇细致分析各个field: 1) Table Descriptor:stage2中不包含任何的attribute的field,每个level中的descr ...
- <8>Lua继承
模拟继承方式 代码: --继承 -- 基类:Person local Person = {} --基类的表 -- 方法 function Person:test() print("Perso ...