td之overflow:hidden 多余文本隐藏效果

方法1: table-layout: fixed; width: 200px;

语法： table-layout : auto | fixed

  • auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
  • fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关

隐藏对象内的多余文本，一般做法：

selector{ width:200px; white-space:nowrap; overflow:hidden; }　

但是这段代码用在td上不会生效，单元格依然会被撑开～;

解决办法：同时为其table定义width:*; table-layout : fixed OK：多余文本已经被自动隐藏。

<head>

    <title>回头来看看Table：TD也玩overflow:hidden</title>

    <style type="text/css">

        table { width:500px;table-layout:fixed; }

        .col1 { width:100px; }

        .col2 { width:200px; }

        .col3 { width:100px; }

        td {white-space:nowrap;overflow:hidden;}

        </style>

    </head>

<body>

    <table border="1" cellspacing="0" summary="测试">

        <tr>

            <td class="col1"><strong>产品名称</strong></td>

            <td class="col2"><strong>产品介绍</strong></td>

            <td class="col3"><strong>产品备注</strong></td>

        </tr>

        <tr>

            <td>神舟 优雅Q400N</td>

            <td><a href="shou_2.htm">优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器</a></td>

            <td>迅驰4平台，突出的性价比，漂亮的外观</td>

        </tr>

    </table>

</body>

方法2: 在td内加个div，td定义宽度，然后div只要定义高度就可以了。如:

    td{ width: 200px; }

    td .inner-div{ height:25px; line-height:25px;white-space:nowrap; overflow:hidden;  text-overflow:ellipsis; }

td之overflow:hidden 多余文本隐藏效果的更多相关文章

  1. overflow:hidden的清除浮动效果

    我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高度时,设置该属性即可把内容区域超出来的部分隐藏,使内容区域完全包含在该包含块中. 然而& ...

  2. td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效，英文 数字 不换行 撑破div容器

    我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...

  3. [转]对 td 使用 overflow:hidden; 无效的几点错误认识

    转载:http://www.cftea.com/c/2010/12/UVBUCD0J888L2XPQ.asp 一.是 td 的原因. 其实这关 td 什么事呢?div 也是一样的,看示例: <d ...

  4. overflow: hidden用法，不仅仅是隐藏溢出

    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <!DOCTYPE html> <html ...

  5. overflow:hidden的用法

    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <%@ Page Language="C#& ...

  6. overflow:hidden失效问题

    2018-08-03 Questions about work 这几天开发的时候遇到了个问题,如图1. 写了个demo demo 地址 由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常.PM ...

  7. overflow hidden 遇上absolute失效

    原文地址 背景 这几天开发的时候遇到了个问题,如图1. 写了个demo 由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常.PM要求能够显示最后一个完整的标签. 当在iPhone5手机上查看页 ...

  8. 关于overflow:hidden的作用（溢出隐藏，清除浮动，解决外边塌陷等等）

    1.overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果 ...

  9. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

随机推荐

  1. jsp获取枚举的值

    Struts2的Action传回页面一个list,页面迭代这个list,获取下拉框的值,获取过来是枚举类型. 在jsp页面获取枚举的常量值和枚举的值的例子如下: jsp页面: <td >状 ...

  2. Asp.net MVC学习

    一.mvc项目的创建并运行 1.启动vs2010 2.新建项目 3.选择Asp.net mvc应用程序 4.不创建测试用例 5.创建之后的效果 6.运行后的mvc程序

  3. javascript线程解释（setTimeout,setInterval你不知道的事）

    john resig写的一篇文章: 原文地址:http://ejohn.org/blog/how-javascript-timers-work/ 作为入门者来说,了解JavaScript中timer的 ...

  4. 解决Node.js调用fs.renameSync报错的问题（Error: EXDEV, cross-device link not permitted）

    2014-08-23 今天开始学习Node.js,在写一个文件上传的功能时候,调用fs.renameSync方法错误 出错代码所在如下: function upload(response,reques ...

  5. openNebula dubug

    lowest common denominator convenient way to manage virtual machines

  6. XML限制、初步WEB服务

    DTD <!DOCTYPE 根元素 [ <!ELEMENT 元素 (a,b,c)>//必须按照根元素包含abc顺序排列 <!ATTLIST 属性 > ]> 引用方式 ...

  7. freemaker

    FreeMarker模板文件主要由如下4个部分组成:  1,文本:直接输出的部分  2,注释:<#-- ... -->格式部分,不会输出  3,插值:即${...}或#{...}格式的部分 ...

  8. mongodb cpu 超过100%居高不下的原因分析过程

    -- mongodb cpu is high, infomation as below: 1 the message in the http://10.100.1.11:28017/ as below ...

  9. Codechef Nuclear Reactors 题解

    There are K nuclear reactor chambers labelled from 0 to K-1. Particles are bombarded onto chamber 0. ...

  10. Pro Android学习笔记（十一）：了解Intent（中）

    Intent的构成 Intent能够带有action,data(由URI表达),extra data(key/value map,键值对),指定的类名(成为component name).一个inte ...