参考 http://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html

  http://www.zhangxinxu.com/wordpress/?p=4105

只关注实现其效果的css属性,暂无视浏览器兼容性。

table{
table-layout: fixed;
}
.autocut{
width:200px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
.autocut:hover{
overflow: visible;
white-space: normal;
word-wrap: break-word;
}

分别看一下达到其效果的属性:

table-layout: fixed;

让表格布局固定,也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。

overflow: hidden;

让溢出的内容被裁剪,使其不可见。

white-space: nowrap

不折行显示。

text-overflow: ellipsis;

溢出文本显示省略标记...

overflow: visible;

溢出文本可见,正常显示。

white-space: normal;

默认。空白会被浏览器忽略。这个不是很理解

word-wrap: break-word;

在长单词或 URL 地址内部进行换行。

css对html中表格单元格td文本过长的处理的更多相关文章

  1. 表格单元格td设置宽度无效的解决办法 .

    http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...

  2. 使用CSS和JQuery实现表格单元格内容超出时部分隐藏,隐藏部分以...显示

    1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...

  3. 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

  4. 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行

    1.常用表格标签 普通    <table>           |           <tr>          |           |          <th ...

  5. colgroup中col定义表格单元格宽度

    colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...

  6. EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字

    EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母   Dim myReg    ...

  7. 使用POI创建word表格-在表格单元格中创建子表格

    要实现的功能如下:表格中的单元格中有子表格 实现代码如下: XWPFParagraph cellPara = row.getCell(j).getParagraphArray(0); //row.ge ...

  8. 关于html表格单元格宽度的计算规则

    * { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. oc语言特性

    It’s a superset of the C programming language and provides object-oriented capabilities and a dynami ...

  2. java基础编程——二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  3. 零基础快速入门SpringBoot2.0 (一)

    零基础快速入门SpringBoot2.0 (一) 一.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 1.依赖版本jdk8以上, Spr ...

  4. java web用户登录界面

    做这次实验,主要用到了mysql  java web 的 内容 实验代码: IUserDao.java package com.jaovo.msg.dao; import java.util.List ...

  5. 在mac下使用python抓取数据

    2015已经过去,这是2016的第一篇博文! 祝大家新年快乐! 但是我还有好多期末考试! 还没开始复习,唉,一把辛酸泪! 最近看了一遍彦祖的文章叫做 iOS程序员如何使用Python写网路爬虫 所以自 ...

  6. pymysql模块操作数据库及连接报错解决方法

    import pymysql sql = "select host,user,password from user" #想要执行的MySQL语句 #sql = 'create da ...

  7. build path导入的jar失效导致找不到类

    今天碰到一个很奇葩的问题,搞起我以后都不敢 build path到jar了 所以我就全部放到lib目录下了,因为之前使用build path导入的jar失效了,一直找不类,具体原因我也不清楚,我之前的 ...

  8. ATM-lib-common

    import logging.configfrom conf import settingsfrom core import src def get_logger(name): logging.con ...

  9. php中关于empty()函数是否为真的判断

    <?php// $a = 0;  ==> 符合empty,empty($a)为true// $a = '0';  ==> 符合empty,empty($a)为true// $a = ...

  10. mysql索引详细描述与应用场景

    索引的数据结构: (1)一般是B+tree:MySql使用最频繁的一个索引数据结构,数据结构以平衡树的形式来组织,因为是树型结构,所以更适合用来处理排序,范围查找等功能. (2)Hash:Hsah索引 ...