小伙伴们有没有的遇到页面显示时，因为数据太长导致显示的表格某一列过长，从而导致页面的不美观，下面我们来看一看如何用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. 重读APUE(10)-中断的系统调用

    如果进程在执行一个低速系统调用而阻塞期间捕获到一个信号,则该系统调用就会被中断而不再继续执行:该系统调用返回出错,其errno设置为EINTR: 系统将系统调用分成两类:低速系统调用和其他系统调用:低 ...

  2. php学习之Model类

    <?php $config = include 'config.php'; //引入数据库配置文件 $model = new Model($config); //测试案例 // $saveDat ...

  3. mac下更新node版本

    node有一个专门管理node.js版本的包叫作:n: 查看当前 node版本:node -v 安装n工具包:sudo npm i -g n 安装最新版node.js:sudo n stable 安装 ...

  4. <frameset>和<body>不能共用

    frameset 定义: frameset 元素可定义一个框架集.它被用来组织多个窗口(框架).每个框架存有独立的文档.在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行 ...

  5. WPF 设置TextBox为空时，背景为文字提示。

    <TextBox FontSize="> <TextBox.Resources> <VisualBrush x:Key="HelpBrush" ...

  6. 目标检测-Cascade-RCNN

    转载:https://zhuanlan.zhihu.com/p/36095768 Cascade R-CNN: Delving into High Quality Object Detection 论 ...

  7. python中星号变量的几种特殊用法

    python中星号变量的几种特殊用法 不知道大家知不知道在Python中,星号除了用于乘法数值运算和幂运算外,还有一种特殊的用法"在变量前添加单个星号或两个星号",实现多参数的传入 ...

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

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

  9. iOS-自定义导航控制器

    BasicNavigationViewController:UINavigationViwController /* 隐藏导航底部线条 */ -(void)viewDidLoad{    [super ...

  10. tf.contrib.layers.fully_connected参数笔记

    tf.contrib.layers.fully_connected 添加完全连接的图层. tf.contrib.layers.fully_connected(    inputs,    num_ou ...