做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表格超出部分显示省略号的更多相关文章

  1. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  2. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  3. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  4. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  5. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  6. IVIEW对的table组件超出长度用省略号代替,使用气泡提示。

    render: (h, params) => { return h('div', [ h('Tooltip', { props: { placement: 'top' } }, [ h('spa ...

  7. HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  8. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  9. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

随机推荐

  1. entry.define编程思路

    0.lua将文字传给场景脚本. 1.场景脚本将pattern.define文件中的PAT当作子弹(水泡弹,带颜色) 2.用户的问题作为客户端的请求,发送给服务器端 3.服务器端接受客户端的问题请求 4 ...

  2. WCG distribution of byteball

    https://steemit.com/byteball/@punqtured/processing-for-good-get-rewarded-for-crunching-numbers-to-cu ...

  3. abap function module中的异常处理

    1: 定义一个有异常抛出的function module.  (zfm_moudle6),  该函数中有符合exceptions中的异常,将会自动将exceptions中的异常抛出. FUNCTION ...

  4. Scala类的构造器与访问器

    1.构造器 在Scala中,每个类都有一个主构造器.主构造器与类的定义交织在一起,如下: class Person ( private var _name: String, private var _ ...

  5. linux下automake用法

    linux下automake用法 2017年02月06日 09:21:14 阅读数:3684 标签: makemakefilegnulinux   作为Linux下的程序开发人员,大家一定都遇到过Ma ...

  6. Google之路

    1,找一个靠谱的dns 2, 替换 C:\Windows\System32\drivers\etc\hosts文件 3,刷新dns 在cmd下运行 ipconfig /flushdns 成功后会提示: ...

  7. MJExtension代码解释

    Runtime 是什么? objective-C会把函数调用的转换为消息发送,objc_MsgSend(receiver, msg), 注意,recevier指的是消息的接受者.那么self, sup ...

  8. 纯css瀑布流布局

    由于公司的项目需要才用到瀑布流布局 因为后台返回的json直接循环出来的,所以不能做左右浮动的那种,所以才用到了瀑布流布局 16年之前的瀑布流布局基本都时基于js或者直接用jq插件的,但是随着技术的进 ...

  9. UVA 11178 Morley's Theorem(几何)

    Morley's Theorem [题目链接]Morley's Theorem [题目类型]几何 &题解: 蓝书P259 简单的几何模拟,但要熟练的应用模板,还有注意模板的适用范围和传参不要传 ...

  10. Codeforces Round #402 D String Game(二分)

    [题目类型]二分答案 &题解: 只要你想到二分答案就不是难题了,但我当时确实是想不到. [时间复杂度]\(O(nlogn)\) &代码: #include <cstdio> ...