做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. node 学习系列-hello world

    准备学习node,记录一段 1.搭建好 node 以后,就记录一下 hello world

  2. Kinect2.0相机标定

    尝试进行Kinect2.0相机进行标定 1. Color镜头标定 $(u_{rgb},v_{rgb},1)=W_{rgb}*(x,y,z)$ Calibration results after opt ...

  3. abap特性

    1:实例成员是属于某一个对象的,静态成员属于整个类. 2:abap类中,可以定义三种不同类型的成员,分布是属性(如data),方法(method),事件(event). 3: abap中定义静态属性的 ...

  4. 116A

    #include <stdio.h> int main() { int n; int a1,a2; int min=0; int cap=0; scanf("%d",& ...

  5. MYSQL: set names utf8是什么意思?

    set names utf8 是用于设置编码,可以再在建数据库的时候设置,也可以在创建表的时候设置,或只是对部分字段进行设置,而且在设置编码的时候,这些地方最好是一致的,这样能最大程度上避免数据记录出 ...

  6. 【Java】-NO.16.EBook.4.Java.1.003-【疯狂Java讲义第3版 李刚】- oop

    1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.003-[疯狂Java讲义第3版 李刚]- oop Style:EBook Series:Java S ...

  7. js, css混淆

    原理:调用yuicompressor-2.4.8.jar, 生成混淆后的文件,强大的它能处理css,js. 1,准备一个txt,列出所需要合并的js,如js.txt jquery-1.9.1.min. ...

  8. php-fpm sock 进程池优化

    更改tcp为sock ;listen = 127.0.0.1:9000 listen = /dev/shm/php-cgi.sock pm = static \\静态进程池 pm.max_childr ...

  9. [LeetCode] 455. Assign Cookies_Easy tag: Sort

    Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...

  10. CentOS7 开放服务端口

    CentOS 7 默认是firewall防火墙 如果你想让一个web服务可以被其它机子访问,就得开放这个服务的端口,不然就会被拦截 1. 开放端口命令 firewall-cmd --add-port= ...