小伙伴们有没有的遇到页面显示时，因为数据太长导致显示的表格某一列过长，从而导致页面的不美观，下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题。

主要设置两个样式：

  1.  table{
  2.  　　table-layout: fixed;  ==>固定布局的算法。在这种算法中，表格和列的宽度取决于col对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。 
    　　　　　　　　　　　　　　　　　 假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100% （注意：此样式是关键）
  3.  td{
  4.  　　white-space: nowrap;      ==>设置内容抵达容器边界会不会转到下一行
  5.  　　overflow: hidden;         ==>不显示超过对象尺寸的内容（这个绝对不能少）,也就是说设置td里面的数据无论有多少，都不会换行
  6.  　　text-overflow: ellipsis;  ==>将被隐藏的那部分用省略号代替。
  7.  }

源代码如下：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <style type="text/css">
  5.          table
  6.          {
  7.              table-layout: fixed;
  8.              width: 100%;
  9.          }
  10.          td
  11.          {
  12.              white-space: nowrap;
  13.              overflow: hidden;
  14.              text-overflow: ellipsis;
  15.              background-color: #ccc;
  16.          }
  17.      </style>
  18.  </head>
  19.  <body>
  20.      <table>
  21.          <thead>
  22.              <th>
  23.                  第一列
  24.              </th>
  25.              <th>
  26.                  第二列
  27.              </th>
  28.          </thead>
  29.          <tbody>
  30.              <tr>
  31.                  <td>
  32.                      <span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span><span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span>
  33.                  </td>
  34.                  <td>
  35.                      超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容
  36.                  </td>
  37.              </tr>
  38.          </tbody>
  39.      </table>
  40.  </body>
  41.  </html>

效果图：

这样就解决了带表格的页面不美观的问题，希望可以帮助到大家！

Css解决表格超出部分用省略号显示的更多相关文章

  1. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

  2. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  3. css 实现div内显示两行或三行，超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  4. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  5. css控制字符长度超出变成点点点显示（单行，多行）

    css控制字符长度超出变成点点点显示 单行: width 必不可少 div{ width: 55%; text-overflow: ellipsis; overflow: hidden; white- ...

  6. 翻译：如何使用CSS实现多行文本的省略号显示

    本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...

  7. CSS解决文字超出显示省略号问题

    超出一行 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 超出多行 overflow: hidden; text-ove ...

  8. css超出内容以省略号显示

    控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...

  9. text-overflow:ellipsis实现超出隐藏时省略号显示

    text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-s ...

随机推荐

  1. PSO算法

    1.简介粒子群优化算法(PSO)是一种进化计算技术(evolutionary computation),1995 年由Eberhart 博士和kennedy 博士提出,源于对鸟群捕食的行为研究 .该算 ...

  2. 安装Rabbitmq脚本

    安装RabbitMQ时需要先安装erlang插件 [root@ZHONG-LONG javascripts]# vim -erlang.sh #!/bin/sh ######安装erl插件 PRO=/ ...

  3. SQL-W3School-基础：SQL ORDER BY 子句

    ylbtech-SQL-W3School-基础:SQL ORDER BY 子句 1.返回顶部 1. ORDER BY 语句用于对结果集进行排序. ORDER BY 语句 ORDER BY 语句用于根据 ...

  4. Android 显示系统：Vsync机制

    一.Vsync简介: 屏幕的刷新过程是每一行从左到右(行刷新,水平刷新,Horizontal Scanning),从上到下(屏幕刷新,垂直刷新,Vertical Scanning).当整个屏幕刷新完毕 ...

  5. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_11-修改页面-前端-Api调用

    修改数据 这是提交按钮的事件editSubmit 注意修改的方法是put方法.所以用requestPut 操作成功自动返回 测试 成功后自动跳转到列表页 修改后的数据

  6. JMeter 不同线程组间变量传递(亲测 ok)

    JMeter元件都是有作用域的,而变量大多使用正则表达式提取器,要想在不通过线程组件使用变量参数,则需要设置全部变量 JMeter函数助手就提供了一个函数用于设置全局变量属性,实现的功能类似于在用户自 ...

  7. 使用redisTemplate存储数据,出现\xAC\xED\x00\x05t\x00

    本文开发环境:SpringBoot+RedisTemplate 代码: /** * 缓存Map * * @param key * @param dataMap * @return */ @Overri ...

  8. 总是访问到tomcat首页解决

    部署代码后总是访问到tomcat首页解决 没有把路径写全 访问:养成带上绝对路径的习惯,否则总是访问到tomcat的首页 http://114.116.65.232:8085/ssoserver/

  9. 使用 tuned/tuned-adm工具动态调优系统CPU性能模式

    1)环境机器品牌:DELL  型号:R620配置:32核 * 1/256 GB*1/300 GB*4() + 1200 GB*2() 系统版本:CentOSLinux release 7.2.1511 ...

  10. HDU 1159 最长公共子序列

    Common Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...