小伙伴们有没有的遇到页面显示时，因为数据太长导致显示的表格某一列过长，从而导致页面的不美观，下面我们来看一看如何用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. pwn学习日记Day7 基础知识积累

    知识杂项 strncpy(char s1,const char s2,int n); 其中有三个参数分别表示目标字符串s1,源字符串s2,拷贝长度.意思是将s2指向的字符串的前n个长度的字符放到s1指 ...

  2. tp5 回滚事务记录，其中一条语句报错，全部回滚

    #################################### 测试事务 // 启动事务 Db::startTrans(); try { //插入行为表 $data = [ 'userId' ...

  3. embeddable persistent key-value store for fast storage

    A persistent key-value store for fast storage environmentsRocksDB is an embeddable persistent key-va ...

  4. Java NIO 学习笔记 缓冲区补充

    1.缓冲区分配 方法   以 ByteBuffer 为例 (1)使用静态方法 ByteBuffer buffer = ByteBuffer.allocate( 500 ); allocate() 方法 ...

  5. Delphi 中自定义异常及异常处理的一般方法

    delphi中异常定义如下: TCustomException   =   class(Exception)     private     public         constructor   ...

  6. VICA概述及架构设计

    VICA全称VAT Invoice Client Platform(增值税发票客户端平台),顾名思义就是公司增值税发票业务相关处理的客户端集成平台.在VICA出现之前,公司发票开具的技术主要是依赖于A ...

  7. 再谈JVM中类加载

    前言 由于本人参加面试,但是JVM这块回答的十分不好,问了面试官,面试官说我基础不行!我真的不行,所以看过的不一定能理解,感觉之前就是糊弄任务,然后这次等实训结束,啥都干完了,我就记录下,深入了解下面 ...

  8. sqlmap（网站数据库注入）

    *教程 http://www.nxadmin.com/tools/1241.html 一.ASP网站 1. sqlmap -u “http://www.czypjx.com/News_show.asp ...

  9. gdb调试工具学习

    GDB 是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较喜欢那种图形界面方式的,像VC.BCB等IDE的调试,但如果你是在 UNIX平台下做软件,你会发现GDB这个调试工具有比 ...

  10. [转帖]K8s 学习者绝对不能错过的最全知识图谱（内含 58个知识点链接）

    K8s 学习者绝对不能错过的最全知识图谱(内含 58个知识点链接)   https://www.cnblogs.com/alisystemsoftware/p/11429164.html 需要加强学习 ...