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

主要设置两个样式：

 table{

 　　table-layout: fixed;  ==>固定布局的算法。在这种算法中，表格和列的宽度取决于col对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。 
　　　　　　　　　　　　　　　　　 假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100% （注意：此样式是关键）

 td{

 　　white-space: nowrap;      ==>设置内容抵达容器边界会不会转到下一行

 　　overflow: hidden;         ==>不显示超过对象尺寸的内容（这个绝对不能少）,也就是说设置td里面的数据无论有多少，都不会换行

 　　text-overflow: ellipsis;  ==>将被隐藏的那部分用省略号代替。

 }

源代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <style type="text/css">

         table

         {

             table-layout: fixed;

             width: 100%;

         }

         td

         {

             white-space: nowrap;

             overflow: hidden;

             text-overflow: ellipsis;

             background-color: #ccc;

         }

     </style>

 </head>

 <body>

     <table>

         <thead>

             <th>

                 第一列

             </th>

             <th>

                 第二列

             </th>

         </thead>

         <tbody>

             <tr>

                 <td>

                     <span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span><span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span>

                 </td>

                 <td>

                     超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容

                 </td>

             </tr>

         </tbody>

     </table>

 </body>

 </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. RISC-V riscv64-unknown-elf

    riscv64-unknown-elf 为 RISC-V指令集的交叉编译工具 以下环境在Liunx ubuntu x86_64 环境下进行,下面示例以生成32位文件为目标来操作使用. screen / ...

  2. Cesium入门-3-官方完整实例

    实例核心代码 //资源访问令牌 Cesium token Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ ...

  3. win10+mysql8.0安装

    一.下载 mysql8.0 windows zip包下载地址: https://dev.mysql.com/downloads/mysql/   1540951981(1).png 二.安装 1.解压 ...

  4. HearthBuddy 召唤随从的问题

    代码如下,在SilverFish\SilverFish\ai\Playfield.cs文件中 public void callKid(CardDB.Card c, int zonepos, bool ...

  5. About Xi’an

    Introduction Ancient Capital It is the birthplace of the Chinese Nation, is one of the four ancient ...

  6. 数据分析 - sql 业务相关练习题

    数据库    userinfo , orderinfo 表 两个 userId 彼此对应 题目 解题 不同月份的下单人数 用户在同一个月份会下多个单,这里进行去重 未支付的脏数据去除 统计用户三月份的 ...

  7. vue 高德地图

    index.html <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119. ...

  8. centos6.5安装mysql（转载，亲测可用）

    如果要在Linux上做j2ee开发,首先得搭建好j2ee的开发环境,包括了jdk.tomcat.eclipse的安装(这个在之前的一篇随笔中已经有详细讲解了Linux学习之CentOS(七)--Cen ...

  9. Hbase shell操作表

    启动hbase shell ./bin/hbase shell 1.创建表,查看表 create 'tableName', 'familykey1','familykey2',.... eg. cre ...

  10. 搭建无人值守安装服务器（CentOS）

    使用PXE+DHCP+TFTP+Kickstart+FTP搭建无人值守安装服务器.一般只有频繁安装系统才会搭建无人值守安装服务器. 虚拟机环境:youxi1,CentOS7系统双网卡,一个网卡桥接模式 ...