一个正常的前端攻城狮，一般情况不会把内容布置到div外面，但是如果这部分的内容，是用户输入的，然后是从数据库中取出来的，那样有内容超出div部分也是很正常的，尤其是这部分内容，是用户通过编辑器编辑的，便有可能出现这样的情况：
比如，限制一个宽350px，高100px的表格，用户用编辑器设置了一个400px x 400px的表格，就会溢出。
<div style="border:2px solid #000000; width:350px; height:100px;">
<table border="0" cellpadding="0" cellspacing="0" width="400" height="400">
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
</table>
</div>
这一部分是单纯的英文还好，直接利用《【CSS】div图层边界对英文换行控制的问题》（
点击打开链接
）解决就可以了。
问题这是不可以压缩的表格！千万不要以为网页的表格还可以像Excel那样自动调整列宽之类的……
此时你可以利用到overflow这个属性。
对于上面这种情况，可以考虑在style中补上overflow: auto;，给这东西补上滚动条的方式来解决，我只找到这种方式了，如果有更好的解决方案欢迎交流，具体代码如下：
<div style="overflow: auto; border:1px solid red; width:350px; height:100px;">
<table border="0" cellpadding="0" cellspacing="0" width="400" height="400">
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
</table>
效果如下图：
对于单行文字的话，如果要像上面一样给其补...，一般常见于标题，可以使用如下的方式解决，利用的overflow:hidden属性。再补上text-overflow:ellipsis;white-space:nowrap;两个属性即可，但注意这东西只对于单行文本有用，如果是多行文本，做好还以使用后端语言，在输出前加个条件结构，根据长度是否加点点点再输出。毕竟前端帮到你这里了。
<div style="overflow:hidden;width:100px;text-overflow:ellipsis;white-space:nowrap; "></div>
最后贴上上面那个Gif的全部源码。JavaScript的代码非常简单，1行完事。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OverFlow</title>
</head>
<div style="overflow: auto; border:1px solid red; width:350px; height:100px;">
<table border="0" cellpadding="0" cellspacing="0" width="400" height="400">
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
</table>
<div id="textOver" style="overflow:hidden;width:100px;text-overflow:ellipsis;white-space:nowrap; "></div>
<input id="textInput" type="text" /><button οnclick="input()">确定</button>
</body>
</html>
<script>
function input(){
document.getElementById("textOver").innerHTML=document.getElementById("textInput").value;
</script>
一个正常的前端攻城狮，一般情况不会把内容布置到div外面，但是如果这部分的内容，是用户输入的，然后是从数据库中取出来的，那样有内容超出div部分也是很正常的，尤其是这部分内容，是用户通过编辑器编辑的，便有可能出现这样的情况：比如，限制一个宽350px，高100px的表格，用户用编辑器设置了一个400px x 400px的表格，就会溢出。
对于CSS文本的一些效果，基础一些的知识比较简单，但对于text-indent,vertical-align,text-align等的深入学习能够使我们对HTML5的学习更加轻松，对这部分知识的深入了解，也更利于以后网站的一些小技巧方面的运用。
CSS文本属性
text-decoration 下划线、删除线、顶划线
text-transf...
固定宽度div中有一个table,table设置宽度100%，但是发现table中的内容有一部分被隐藏掉了，实际内容宽度超过了div的宽度
实际效果图：表格内容超出了div的宽度，但是超出部分是被隐藏的
期望效果图：
表格关键部分
<table cellpadding="0" cellspacing="0" border="0" width="100%" bordercolor="#000000" style="border-collapse: collapse;" id="mTable">
用到div包裹table的布局，想要的效果是table的宽度等于div宽度，超出内容省略号显示。
听起来很简单啊，设置table宽度为100%，省略号三行代码往上一粘，心想着大功告成。
but！！！！页面效果发现其中一行数据较长，导致table其实是超出了父级div。
查资料后发现原来table有不一样的默认样式table-layout，它的值是这样的：
实际是把表格写在了 redio 里面
问题： table 在 div 里面，想要的效果是如果 table 的内容超出了父元素就显示省略号，再把 table 的宽度设置为100%，但是，最后数据比较长还是超出了父元素
原因： table 是有不一样的默认样式 table-layout
