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. JS 精粹(三)

    (一)基本问题 JS的数据类型(不是数据结构)分:简单数据类型(undefined\null\boolean\string\number\symbol).复杂数据类型(object). 对象是可变的键 ...

  2. firefox 自写底层扩展，源码简介

    还记得2010年的时候,那时候开始喜欢上了js,经常逛MDN 一开始写些简单的油猴脚本,慢慢的接触了扩展开发,发现用自己的js知识 加上firefox的插件API,可以完成好多功能. 看了很多插件的源 ...

  3. codeforces 645E . Intellectual Inquiry

    题目链接 如果不考虑重复的元素, 那么我们可以很容易的发现, 长度为n的字符串它的子串数量是 $ 2^n $ . 我们设每个到位置i, 答案的数量为f[i]. 然后我们考虑重复的, 我们发现, 每加入 ...

  4. Python核心编程笔记--随机数

    #第一步引入模块 import random #第二步生成随机数 print random.randint(1,3);#[1,2,3]注意这里是闭区间.

  5. 《转》JAVA中PriorityQueue优先级队列使用方法

    该文章转自:http://blog.csdn.net/hiphopmattshi/article/details/7334487 优先级队列是不同于先进先出队列的另一种队列.每次从队列中取出的是具有最 ...

  6. (10)Xamarin.Android - 储存数据于Windows Azure

    原文 Xamarin.Android - 储存数据于Windows Azure 如何将Xamarin.Android 与Windows Azure做结合,将Android APP上的数据丢到云端去储存 ...

  7. [LeetCode][Python]Reverse Integer

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/reverse ...

  8. 关于SYN洪泛攻击简介

    在TCP三次握手中,server为了响应一个收到的SYN.分配并初始化连续变量和缓存.然后server发送一个SYNACK进行响应,并等待来自客户的ACK报文段. 假设某客户不发送ACK来完毕该三次握 ...

  9. JMS详细的工作原理【转】

    如果手机只能进行实时通话,没有留言和短信功能会怎么样?一个电话打过来,正好没有来得及接上,那么这个电话要传递的信息肯定就收不到了.为什么不能先将信息存下来,当用户需要查看信息的时候再去获得信息呢?伴随 ...

  10. c# 柱状图（转载）

    // c# 显示柱状图 using System; using System.Data; using System.Configuration; using System.Web; using Sys ...