table中超长字符串省略号表示两种方法
写在前面:
1、第一种从网上找到的解决方式添加table-layout:fixed
2、第二种添加div
3、字符串过长产生省略号的css语句为如下三种合用:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;但是在table中并不起作用,即使给td固定宽度,依然会被撑开,解决方案如下
1、
效果显示:
table{
width:360px;
height:40px;
table-layout: fixed; }
在table css中插入
table-layout: fixed;
在W3Cschool上对该属性说明如下:tableLayout 属性用来显示表格单元格、行、列的算法规则。fixed:列宽由表格宽度和列宽度设定
全部代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
table{
width:360px;
height:40px;
table-layout: fixed;
}
table tr td{width:120px;border:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<table width="360px" height="40px">
<tr><td><strong>博客园<strong></td>
<td><strong>a67</strong></td>
</tr>
<tr>
<td>固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、</td>
<td>表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。</td>
</tr>
</table>
</body>
</html>
2、在td中添加div,效果显示同一
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
table{
width:360px;
height:40px;
table-layout: fixed;
}
.test1,.test2{width:120px;border:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<table width="360px" height="40px">
<tr><td><strong>博客园<strong></td>
<td><strong>a67</strong></td>
</tr>
<tr>
<td><div class="test1">固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、</div></td>
<td><div class="test2">表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。</div></td>
</tr>
</table>
</body>
</html>
补充说明:
如果希望表格中列宽不一样,请把所有对应的列宽全部添加宽度,否则就会被均分啦
table中超长字符串省略号表示两种方法的更多相关文章
- Python 中格式化字符串 % 和 format 两种方法之间的区别
Python2.6引入了 format 格式化字符串的方法,现在格式化字符串有两种方法,就是 % 和 format ,具体这两种方法有什么区别呢?请看以下解析. # 定义一个坐标值 c = (250, ...
- 在Delphi中使用C++对象(两种方法,但都要改造C++提供的DLL)
Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...
- .net中创建xml文件的两种方法
.net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...
- Js 字符串拼接的两种方法
字符串拼接的两种方法 用数组的方法的好处是:避免变量重新定义.赋值 <!DOCTYPE html> <html lang="en"> <head> ...
- (转)Shell中获取字符串长度的七种方法
Shell中获取字符串长度的七种方法 原文:http://blog.csdn.net/jerry_1126/article/details/51835119 求字符串操作在shell脚本中很常用,下面 ...
- golang中获取字符串长度的几种方法
一.获取字符串长度的几种方法 - 使用 bytes.Count() 统计 - 使用 strings.Count() 统计 - 将字符串转换为 []rune 后调用 len 函数进行统计 ...
- 在shell script中进行数值运算的两种方法
方法1:使用"$((计算式))"的方式进行数值运算,不需要使用declare命令显示声明数值型变量来存储计算结果: 方法2:使用declare命令配合"-i"选 ...
- Android中Intent传递对象的两种方法(Serializable,Parcelable)
今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...
- 在List中找出最大值的两种方法
先说需求:找出一个对象List中,某个属性值最大的对象. 1.定义对象 private class A { public int ID { get; set; } public string Name ...
随机推荐
- weblogic8.1在myeclipse中启动正常,在单独的weblogic中无法正常启动的解决方案.
应用程序服务器weblogic8.1.5,项目在myeclipse中启动正常,在单独的服务器中启动就报错了.错误如下图: 经过观察,发现在myeclipse中设置了以下的jar包.估计是这个问题引起的 ...
- Expected authority at index 7: hdfs://
hadoop版本:1.0.4 今天在跑TestForest的时候,居然出现了这个问题: Exception in thread "main" java.lang.IllegalAr ...
- 【极客学院出品】Cocos2d-X系列课程之九-BOX2D物理引擎
Cocos2d-x 是时下最热门的手游引擎,在国内和国外手机游戏开发使用的份额各自是70%和25%,在App Store的top10中,有7个是用它开发的. 本节课程为Cocos2d-x系列课程之九, ...
- PCL库配置出现的问题(WIN10+VS2013)
边看电影边配终于配好了,中间出现了一些问题,在网上很难搜到,可能每个人都碰到的不同.摸索了一会终于都解决了,记录在这里,免得又碰到. PCL是什么东西就不在此介绍了. 主要是参考这篇博客做得,不过我后 ...
- C# winfrom 模拟ftp文件管理
从网上找到的非常好用的模拟ftp管理代码,整理了一下,希望对需要的人有帮助 using System; using System.Collections.Generic; using System.T ...
- EF MySQL 提示 Specified key was too long; max key length is 767 bytes错误
在用EF的CodeFirst操作MySql时,提示 Specified key was too long; max key length is 767 bytes错误,但数据库和表也建成功了.有高人知 ...
- NSString 字符串操作
//一.NSString /*----------------创建字符串的方法----------------*/ //1.创建常量字符串. NSString *astring = @"Th ...
- JSP基础之 C标签中的 varStatues属性
变量状态参数,该属性有5个常用值count 表示当前遍历集合的元素个数index 表示当前遍历到集合的第几个元素current 表示当前的集合元素first 表示集合的第一个元素last 表示集合的最 ...
- MySQL基础之 path环境变量的作用 (科普)
在谈mysql配置环境变量之前,先谈一下windows环境变量的作用,有时候在windows cmd窗口运行命令时,经常会出现“XXX不是内部或外部命令的提示” 原因是系统没有找到执行相应命令的文件( ...
- USACO Chapter 1 解题总结
USACO Chapter 1 解题总结 1.1.1 Your Ride Is Here 基本字符串操作,无压力. 1.1.2 Greedy Gift Givers 基础模拟题,弄明白题意,不怕麻烦, ...