做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. iot-dm异常日志

    iot-dm 本机断网日志 2018-03-15 08:55:41,345 INFO com.inspur.iot.client.core.IotConnection Connection is be ...

  2. (转)Springboot邮件服务

    springboot仍然在狂速发展,才五个多月没有关注,现在看官网已经到1.5.3.RELEASE版本了.准备慢慢在写写springboot相关的文章,本篇文章使用springboot最新版本1.5. ...

  3. wordvector to sentence vector

    wordvector已经通过word2vec训练出来了,可是如何通过WV得到SV(Sentence Vector)? 思路1: 直接将句子的向量叠加取平均:效果很不好,每个词没有考虑权重,获取的向量会 ...

  4. Ext.define细节分析

    自己写的其实还是不懂,再看看别人写的吧Extjs4 源码分析系列一 类的创建过程https://www.cnblogs.com/creazyguagua/p/4302864.htmlhttp://ww ...

  5. shell的函数返回值

    1.默认function的返回值包含0 和1,执行成功,返回0,执行失败,返回1,可以采用$?来获取执行结果 2.函数如何返回字符串呢,可以采用echo函数 #!/bin/bashfunction t ...

  6. node使用 log4js

    log4js //配置日志的输出级别,共ALL<TRACE<DEBUG<INFO<WARN<ERROR<FATAL<MARK<OFF八个级别,defau ...

  7. CentOS6.5安装zookeeper-3.4.5(单机)

    1.下载 下载链接:http://archive.apache.org/dist/zookeeper/ 本文下载版本:zookeeper-3.4.5.tar.gz 2.安装 安装目录:/usr/loc ...

  8. svn加锁设置

    SVN 的锁定与解锁 简单的说,如果压根没有锁lock,那么每个人都拥有一个本地copy,每个人都能自由地对本地copy编辑edit并提交commit,这样可能会导致冲突conflict,最后不得不合 ...

  9. React对比Vue(01 数据的定义,使用,组件的写法,目录结构等)

    1.脚手架对比 两个都需要安装node node自带npm 然后安装cnpm yarn(有时候 npm会丢包,所以) npm install -g cnpm --registry=https://re ...

  10. cocos2dx - JS - 碰撞检测

    碰撞检测是游戏的一个重要组成部分,我们这里使用一种最简单的方法,就是获取精灵的矩形碰撞框.当然圆形的碰撞检测也比较简单,其他形状就复杂多了.首先是如何获取矩形碰撞框:var hBox=this.her ...