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. C语言学习——C程序的运行机理

    预处理: #include<xxx> 尖括号表示库文件:#include"xxx" 双引号表示自己写的文件. #include后面的文件格式允许多种,但若要是" ...

  2. Nginx修改配置实现图片防盗链

    一般情况下,防盗链是针对软件下载和图片的,由于一般的站点不提供资源下载,所以本文主要是针对图片的防盗链 1.如果对全站图片做防盗链,至少需要一个另外的域名存放指向图片.因为如果对全站图片做了防盗链,包 ...

  3. jsp 配置MySQL服务器 以及数据的插入和读取

    不多说,直接上代码.百度上面也是一大堆,大家多问百度就行. 在利用JDBC访问数据库过程中,主要涉及三种资源:对数据库的连接的连接对象Connection,SQL语句对象 Statement,访问结果 ...

  4. C#版-百度网盘API的实现（二）

    在这篇文章中,我们通过代码来实现百度网盘的简单操作, 一,登陆,在代码中,我有一个Baidu1的类,实例化该类时回执行登陆方法,该类对外开放了三个方法, 1,GetFileDir获取根目录下的文件夹及 ...

  5. 对手机SD卡的一些操作

    首先要导入外包 log4j-1.2.16.jar 代码如下: package com.car273.util; import java.io.BufferedReader; import java.i ...

  6. 最近招两个兼职的活（PHP和JSP）

    我这里的活,都是兼职写作的,是两本入门教程, 一本是PHP+Nginx 一本是JSP+Servlet. 都是入门教程,有署名有稿酬,有兴趣的可以联系 QQ:837652732  验证:PHP或Java ...

  7. paip.c++ qt 项目工程互相引用的方法

    paip.c++ qt 项目工程互相引用的方法 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/ ...

  8. OpenGL中glRotatef()函数究竟对矩阵做了什么

    OpenGL中glRotatef()函数究竟对矩阵做了什么 我们知道OpenGL中维持着两套矩阵,一个是模型视图矩阵(model view matrix),另一个是投影矩阵(projection ma ...

  9. City Game（动态规划）

    City Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  10. openvswitch安装、基本操作

    一.安装,配置 //下载源码.编译.安装: #wget http://openvswitch.org/releases/openvswitch-2.3.0.tar.gz #tar -zxvf open ...