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. ...
随机推荐
- 解决npm ERR! Unexpected end of JSON input while parsing near的方法汇总
参考链接:https://segmentfault.com/a/1190000015646531
- ES6语法 promise用法
ES6语法 promise用法 function doSomething(){ return new Promise((resolve,reject)=>{ resolve('jjjj');// ...
- 【Java】-NO.14.Java.4.Java.1.001-【Java JUnit 5 】-
1.0.0 Summary Tittle:[Java]-NO.14.Java.4.Java.1.001-[Java JUnit 5 ]- Style:Java Series:JUnit Since:2 ...
- 【LeetCode每天一题】Swap Nodes in Pairs
Given a linked list, swap every two adjacent nodes and return its head. You may not modify the value ...
- gerrit上的commit msg中关联jira单号(含gerrit的安装)
这个问题折腾了很久,前期后后大概一个月吧,终于搞定了,查了很多资料,有的不完整,有的完全就不能用,有的没说完整,所以一定要记录下来,我的心血啊. 由于公司在用的gerrit的是正式环境中的,大家都在使 ...
- ShakaApktool 用法
usage: ShakaApktool b[uild] [options] <app_path> -df,--default-framework 使用默认的框架资源文件. -f 跳过已编译 ...
- mx:Panel (面板容器) mx:Button (按钮) 默认大小
1.默认组件大小 <mx:Panel title="默认的面板容器大小和按钮控件大小"> <!-- 使用控件大小默认值 --> <mx:Button ...
- (3)Python3笔记之变量与运算符
一.变量 1). 命名规则: 1. 变量名不能使用系统关键字或保留关键字 2. 变量区分大小写 3. 变量命名由字母,数字,下划线组成但不能以数字开头 4. 不需要声明变量类型 是 a = 1 ...
- 笔记 : WampServe加装PHP版本(7.2.3)为例
1.由于正在学习Laravel框架,服务器wamp,Composer已搭建完成,但在安装laravel installer之后使用laravel new blog,报错为"This pack ...
- Service Fabric下删除实例并注销应用
Service Fabric下删除实例并注销应用: 以应用名称:Application1为例 1.打开PowerShell 2.连接集群: Connect-ServiceFabricCluster - ...