css对html中表格单元格td文本过长的处理
参考 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文本过长的处理的更多相关文章
- 表格单元格td设置宽度无效的解决办法 .
http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...
- 使用CSS和JQuery实现表格单元格内容超出时部分隐藏,隐藏部分以...显示
1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...
- 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
- 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行
1.常用表格标签 普通 <table> | <tr> | | <th ...
- colgroup中col定义表格单元格宽度
colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...
- EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字
EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母 Dim myReg ...
- 使用POI创建word表格-在表格单元格中创建子表格
要实现的功能如下:表格中的单元格中有子表格 实现代码如下: XWPFParagraph cellPara = row.getCell(j).getParagraphArray(0); //row.ge ...
- 关于html表格单元格宽度的计算规则
* { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
随机推荐
- 六、react添加多个className报错解决方法
例如<div className={style.calss1,style.class2}></div> 该方法会报错 想得到最终渲染的结果:<div class='cla ...
- python_35_进度条
import sys for i in range(50): sys.stdout.write("+")#此命令不会像print语句执行一次,换行一次\ sys.stdout.fl ...
- [转] 防止js全局变量污染方法总结
javaScript 可以随意定义保存所有应用资源的全局变量.但全局变量可以削弱程序灵活性,增大了模块之间的耦合性.在多人协作时,如果定义过多的全局变量 有可能造成全局变量冲突,也就是全局变量污染问题 ...
- C# sizeof运算符
一.C# sizeof运算符 sizeof运算符用于获取值类型的字节数. 二.示例 using System;using System.Collections.Generic;using System ...
- C# FileInfo 类
FileInfo类不像File类,它没有静态方法,仅可用于实例化的对像.FileInfo对像表示在磁盘或网络位置的文件,注意它不是流,为了读写文件,必须创建Stream对像. fileInfo类提供了 ...
- ios swift 里面关于变量 常量 可选类型 控制流的一些心得
//swift 里面没有头文件和实现文件.只有一个.swift文件 //swift 里面没有main的概念,程序从main.swift开始执行 //swift 每一条执行语句可以不用分号结束,多条语句 ...
- 数据结构(C语言)分享笔记:数据结构的逻辑层次、存储层次
[1] 严格意义上数据结构的概念 数据结构,一个简单的定义:相互之间存在一种或多种特定关系的数据元素的集合.即:数据结构 = 元素集合 + 元素间关系的集合 . 在讨论数据结构时,可以基于两个不同的层 ...
- python笔记-dict字典的方法2
#!/usr/bin/env python #-*- coding:utf-8 -*- ''' 概述: 使用键值(key-value)存储,具有极快的查找速度 注意:字典是无序的 key的特性: 1. ...
- javascript oo实现
很久很久以前,我还是个phper,第一次接触javascript觉得好神奇.跟传统的oo类概念差别很大.记得刚毕业面试,如何在javascript里面实现class一直是很热门的面试题,当前面试百度就 ...
- matplotlib(一)——matplotlib横轴坐标密集字符覆盖
一.问题描述 具体问题是: 用python库matplotlib进行数据的图表展示: 图表展示图形横坐标有将近100个自定义值需要显示: 保存矢量图(svg),保存后发现横坐标过于密集,坐标值之间有覆 ...