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. OC中最难的一部分内容：内存管理

    OC中最难的一部分内容:内存管理为什么说他难呢?因为内存如果需要我们程序员去管理的话,那个难度肯定是很大的,如果是Java,垃圾回收器会把这份工作给做了,我们不需要关心,但是就是因为如此,Androi ...

  2. User cannot be resolved to a type

    出现 User cannot be resolved to a type 不知道具体问题出在哪里但是我经过将全路径输入并保存后错误消失 将User选上,然后点击保存就可以了! 最后我发现错误消失了!

  3. boost signal2 trackable

    挺简单的一个类,只是维护了一个成员 shared_ptr<detail::trackable_pointee> _tracked_ptr; 这样看来的话,所谓的track还是基于智能指针, ...

  4. HttpServletRequest 各种方法总结（转自百度经验）

    HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息. req ...

  5. web前端-html学习笔记

    学习html最重要的是坚持.细心.多动手.慕课网<HTML+CSS基础课程>的笔记. 1.<h1>网站标题</h1> 如:<h1>腾讯网</h1& ...

  6. J2SE知识点摘记(十一)

    Thread t ￬ synchromized(this)                     线程t得到对象的锁标志 ￬                                   此时 ...

  7. delphi写的整合汇编与api的简单的窗口程序

    program Project1; { Types and Structures Definition }type  WNDCLASSEX = packed record    cbSize: Lon ...

  8. Android 检测SD卡应用

    Android 检测SD卡应用 //                                    Environment.MEDIA_MOUNTED // sd卡在手机上正常使用状态  // ...

  9. 自己写的sql server触发器练练--高手请您跳过吧

    set ANSI_NULLS ONset QUOTED_IDENTIFIER ONgo ALTER TRIGGER [insertReplyToic] ON [dbo].[bbsReplyTopic] ...

  10. Oracle排序

    按照拼音排序 SELECT * FROM TEAM ORDER BY NLSSORT(排序字段,'NLS_SORT = SCHINESE_PINYIN_M') 按照笔画排序 SELECT * FROM ...