前端技术分享-码匠 极客编程技术分享

您当前位于:HTML+CSS ——> table表格中text-overflow的问题以及解决办法

table表格中text-overflow的问题以及解决办法

2015/07/27 20:50:36 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS | 关键词:table,text-overflow,代码失效

table使用text-overflow后失效的解决方法

HTML5学堂:table使用text-overflow后失效的解决方法。CSS实现文本超出显示省略号这个效果相信大家已经是司空见惯了。今天在给学生做项目辅导的时候遇到了一个问题,在table里面text-overflow: ellipsis居然失效,所以今天给大家分享如何解决该问题。

欢迎沟通交流~HTML5学堂

text-overflow应用到table上

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - HTML5学堂</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .wrap table td {
  9.    overflow: hidden;
  10.    width: 100px;
  11.    white-space: nowrap;
  12.    text-overflow: ellipsis;
  13.   }
  14.  </style>
  15. </head>
  16. <body>
  17.  <div class="wrap">
  18.   <table border="1">
  19.    <tbody>
  20.     <tr>
  21.      <td>HTML5学堂http://www.h5course.com/</td>
  22.      <td>HTML5学堂http://www.h5course.com/</td>
  23.      <td>独行冰海http://blog.163.com/hongshaoguoguo@126/</td>
  24.      <td>梦幻雪冰http://m18050905128.blog.163.com/</td>
  25.     </tr>
  26.     <tr>
  27.      <td>HTML5学堂http://www.h5course.com/</td>
  28.      <td>HTML5学堂http://www.h5course.com/</td>
  29.      <td>独行冰海http://blog.163.com/hongshaoguoguo@126/</td>
  30.      <td>梦幻雪冰http://m18050905128.blog.163.com/</td>
  31.     </tr>
  32.    </tbody>
  33.   </table>
  34.  </div>
  35. </body>
  36. </html>

text-overflow应用到table上的效果

text-overflow应用到table上的效果

为什么text-overflow在table上就失效了?

由于table-layout的默认值是auto,即table的宽高将取决于其内容的多少,如果内容的宽高无法预测,那么最终表格的呈现样式也无法保证了,我们只要设置fixed一下就好了。

解决text-overflow在table失效的方法

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - HTML5学堂</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .wrap table{ 
  9.    /*设置表格的宽度*/
  10.    width: 400px;
  11.    /*设置表格布局算法:*/
  12.    table-layout:fixed; 
  13.   }
  14.   .wrap table td {
  15.    overflow: hidden;
  16.    white-space: nowrap;
  17.    text-overflow: ellipsis;
  18.   }
  19.  </style>
  20. </head>
  21. <body>
  22.  <div class="wrap">
  23.   <table border="1">
  24.    <tbody>
  25.     <tr>
  26.      <td>HTML5学堂http://www.h5course.com/</td>
  27.      <td>HTML5学堂http://www.h5course.com/</td>
  28.      <td>独行冰海http://blog.163.com/hongshaoguoguo@126/</td>
  29.      <td>梦幻雪冰http://m18050905128.blog.163.com/</td>
  30.     </tr>
  31.     <tr>
  32.      <td>HTML5学堂http://www.h5course.com/</td>
  33.      <td>HTML5学堂http://www.h5course.com/</td>
  34.      <td>独行冰海http://blog.163.com/hongshaoguoguo@126/</td>
  35.      <td>梦幻雪冰http://m18050905128.blog.163.com/</td>
  36.     </tr>
  37.    </tbody>
  38.   </table>
  39.  </div>
  40. </body>
  41. </html>

最终效果

text-overflow应用到table失效解决方法

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端