|
示例：
<style type="text/css">
table {width:600px;table-layout:fixed;}
td {white-space:nowrap;overflow:hidden;word-break:keep-all;text-overflow:ellipsis}
</style>
<table border=1 >
<tr>
<td width="30%">dd</td>
<td>ddddddddddddddddddddddddddddddfsljdflsajufiajklsjadflkjsalkfdjdsklajdflksajflksajfdlkdsjdflksjfjldskajdflksajflskajf</td>
<td width="30%">dd</td>
</tr>
</table>
方法一、我们的内容，超过了我们设置的宽度时，我们会发现自己设置的宽度又再次失效了，
这时侯我们可以再table上加上 table-layout: fixed; 属性，代表td的宽度固定，不随内容变化。
方法二、
td
{
overflow:hidden;
word-wrap: break-word;
}
方法三：
table的css设置：
<table style=" table-layout : fixed ; word-break : break-all ; "> 或者 .table { table-layout : fixed ; word-break : break-all ;}
td的css设置： 在上面css设置下，td的width可以设置固定值也可设置百分比，达到某些列宽度固定，某些列按比例自适应的效果。
同时td要设置css：
.td{overflow:hidden;}
或直接在标签里添加css代码：
<td style="overflow:hidden;">
td可以设置复杂一点：
.td {white-space:nowrap;overflow:hidden;word-break:keep-all;text-overflow:ellipsis}
其中 white-space:nowrap;
使用 white-space : nowrap强制文本不换行后，前 自动换行 的问题解决了，但同时空格也合并了。可能造成一行的文字被拉伸。
禁止文件自动换行。
white-space，英语词组意思为空余时间，在计算机术语中的意思是泛空格符。white-space 属性设置如何处理元素内的空白。
nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。
设置或检索对象内空格字符的处理方式。
空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体 来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响是一样的。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
扩展资料：
在使用white-space: nowrap强制文本不换行后，发现之前自动换行的问题解决了，但同时空格也合并了。
因为是代码块，可能有很多行，而每行的前面都需要用空格表示代码的层次关系，所以不希望空格被合并。
所以强制文本不换行的前提下保留原有的空格不合并
设置或检索对象内空格字符的处理方式。
空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体 来添加空格，用 br 元素来添加换行。
此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
overflow:hidden 解决溢出隐藏、清除浮动、解决外边距塌陷
给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。
了解word-break属性
MDN上 展示的语法为： /* 关键字值 */ word-break : normal ; word-break : break-all ; word-break : keep-all ; /* 全局值 */ word-break : inherit ; word-break : initial ; word-break : unset ;
几个关键字值的含义如下： normal 使用默认的换行规则。 break-all 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。 keep-all 不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和 normal 一致。
其中， break-all 这个值所有浏览器都支持。但是 keep-all 就不这样了，虽然有一定的发展和进步 – Chrome44正式支持了， 但是，iOS下的Safari8/9都还不支持（下表黄绿色的表示不支持 keep-all ）。换句话说，基本上现在移动端还不适合使用 word-break:keep-all .
更新于2018-01-09
今天再看 兼容性 ，发现喜人：
上面的兼容性数据最小面那行文字很有意思：
Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word .
翻译成简体中文就是：
Chrome, Safari以及其他WebKit/Blink浏览器还支持 费 非官方标准的 break-word 值，其表现就和 word-wrap: break-word 一样。
OK，另外一个男主角登场了， word-wrap .
了解word-wrap属性
MDN上 展示的语法为： /* 关键字值 */ word-wrap : normal ; word-wrap : break-word ; /* 全局值 */ word-wrap : inherit ; word-wrap : initial ; word-wrap : unset ;
几个关键字值的含义如下： normal 就是大家平常见得最多的正常的换行规则。 break-word 一行单词中实在没有其他靠谱的换行点的时候换行。
word-wrap 属性其实也是很有故事的，之前由于和 word-break 长得太像，难免会让人记不住搞混淆，晕头转向，于是在CSS3规范里，把这个属性的名称给改了，叫做： overflow-wrap . 哎呀，这个新属性名称显然语义更准确，也更容易区别和记忆。
但是呢，恕我赵某咳两声，也就Chrome/Safari等WebKit/Blink浏览器支持。
所以，虽然换了个好看好用的新名字，为了兼容使用，目前，还是乖乖使用 word-wrap 吧。 兼容性 见下表（黄绿色的表示不支持 overflow-wrap 新的标准属性的）：
四、回归重点，word-break:break-all和word-wrap:break-word的区别
尼玛，说这两个声明不是兄弟都没人信，都有 word 都有 break ，位置都还一样，一个有2个 break , 一个有2个 word , 妥妥儿的用来迷惑大家的。我是花了好多年才没有把这两个记混淆，之前，每次用到都要查一下，晕死人的要~
这两个声明都能是连续英文字符换行，那区别在哪里呢？
您可以狠狠地点击这里： word-break:break-all和word-wrap:break-word的区别demo
会发现类似下图的效果：
可以发现， word-break:break-all 正如其名字，所有的都换行。毫不留情，一点空隙都不放过。而 word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况。
OK, 应该很容易get这个tips的。
至于如何记忆这两个CSS声明呢？
首字母走起：wbba(微博吧), wwbw(我五百万).
扯下word-spacing和white-space
word-spacing 是单词之间间距的， white-space 是字符是否换行显示的。
text-overflow: ellipsis;单行，多行文本溢出显示 . . .
常见的单行文本溢出显示省略号 写法：text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.p{
width: 100px;
height: 40px;
line-height: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<body>
<p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示</p>
</body>
</html>
text-overflow: ellipsis;多行文本溢出就无法满足,so,
WebKit浏览器有一个-webkit-line-clamp的属性，用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.p {
height: 60px;
line-height: 30px;
width: 80px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<body>
<p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示</p>
</body>
</html>
如下：
其它浏览器的话就需要通过js实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
div{
height: 60px;
}
p {
line-height: 30px;
width: 80px;
margin: 0 auto;
}
</style>
<body>
<div id="div">
<p id="p">多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示</p>
</div>
</body>
<script type="text/javascript">
var eleH = document.getElementById("div").clientHeight;
var pEle = document.getElementById("p");
while(pEle.clientHeight > eleH) {
pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");
};
</script>
</html>
table-layout 属性
属性定义及使用说明
table-layout属性为表设置表格布局算法。
属性定义及使用说明
table-layout属性为表设置表格布局算法。
| 默认值： |
auto |
| 继承： |
no |
| 版本： |
CSS2 |
| JavaScript 语法： |
object.style.tableLayout="fixed" |
|
|
|