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. dubbo+zookeeper+spring+springMVC+mybatis的使用

    读前声明:由于本人水平有限,有错误或者描述不恰当的地方请指出来,勿喷!第一次写博客. 源码下载链接:http://files.cnblogs.com/files/la-tiao-jun-blog/du ...

  2. MyEclipse中SVN的使用方法

    来至转载  -----新浪博客 MyEclipse中的SVN操作手册 1.导入项目 点击工具栏上的[File-Import],进入下图

  3. mysql 按日期查询

    在mysql中,比如你的表的时间字段是column2,并且column2的类型是timestamp 单日查询: select * from TableName where column1='xxxx' ...

  4. Linux学习sed命令

    sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的内容送 ...

  5. struts2 日期标签

    <td align="center"><s:date name="age" format="yyyy-MM-dd"> ...

  6. LNMP卸载

    先停掉所有服务 service mysql stop service php-fpm stop service nginx stop killall mysql* killall php-fpm* k ...

  7. javascript外部ファイル

    function myFunction() {    document.getElementById("demo").innerHTML = "Paragraph cha ...

  8. 一个php创建webservice，并通过c#调用的真实实例

    最近需要用php创建webservice供C#和JAVA来调用,通过3天的搜索和尝试,终于成功在C#下调用,JAVA的调用还没开始,为防止忘记,在这里记录下来全过程. 本文参考了许多文章,文中也采用了 ...

  9. Delphi 的接口机制——接口操作的编译器实现过程(2)

    接口对象的内存空间 假设我们定义了如下两个接口 IIntfA 和 IIntfB,其中 ProcA 和 ProcB 将实现为静态方法,而 VirtA 和 VirtB 将以虚方法实现: IIntfA =  ...

  10. Delphi判断一个文件是不是JPG图片

    判断头几个字节: function IsJpegFile(FileName: string): Boolean; const RightBuf : ..] of Byte = ($FF,$D8,$FF ...