小伙伴们有没有的遇到页面显示时，因为数据太长导致显示的表格某一列过长，从而导致页面的不美观，下面我们来看一看如何用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. JAVA安全漫谈1-8笔记

    一.反射篇1 classloader就是java的类加载器,告诉虚拟机如何加载这个类.默认情况下根据类名来加载类,类名必须是完整路径 public class class_init { { Syste ...

  2. 20182332 实验四《Java Socket编程 》实验报告

    20182332 实验肆<数据结构与面向对象程序设计>实验报告 课程:<程序设计与数据结构> 班级: 1823 姓名: 盛国榕 学号:20182332 实验教师:王志强 实验日 ...

  3. vue实现穿梭框效果

    vue实现穿梭框效果 一.总结 一句话总结: 用两个数组分别记录左右框框里面的值,用两个数组绑定checkbox,用来记录选中的checkbox值,根据选中的checkbox的值实现删除增加即可 1. ...

  4. Linux中查看系统资源占用情况的命令

    用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O 负载情况 ...

  5. SQL-W3School-高级：SQL 通配符

    ylbtech-SQL-W3School-高级:SQL 通配符 1.返回顶部 1. 在搜索数据库中的数据时,您可以使用 SQL 通配符. SQL 通配符 在搜索数据库中的数据时,SQL 通配符可以替代 ...

  6. iOS获取应用当前Caches目录路径以及当前日期

    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES); NSSt ...

  7. 通过OpenCL内核代码猜测设备寄存器个数

    在OpenCL标准中,没有给出查看计算设备一共有多少寄存器,至少能分配给每个work-item多少寄存器使用的特征查询.而由于一个段内核代码是否因寄存器紧缺而导致性能严重下降也是一个比较重要的因素,因 ...

  8. Unity 的 [HideInInspector]

    [HideInInspector] public Transform t; public Transform mm; public Transform nn3; 在变量前面加入,作用:隐藏下一条在In ...

  9. sed工具的基本用法

    sed文本处理工具的用法: 用法1:前置命令 | sed [选项] '条件指令' 用法2:sed [选项] '条件指令' 文件.. .. 认识sed工具的基本选项 sed命令的常用选项如下: -n(屏 ...

  10. 源码分析之AsyncTask

    AsyncTask在Android中是很常用的异步线程,那么AsyncTask和Thread有什么区别呢?这里将从源码角度深入理解AsyncTask的设计和工作原理,这里的AsyncTask基于SDK ...