一个正常的前端攻城狮，一般情况不会把内容布置到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">
<tr>
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
</tr>
<tr>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
</tr>
</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">
<tr>
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
</tr>
<tr>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
</tr>
</table>
</div>
效果如下图：
对于单行文字的话，如果要像上面一样给其补...，一般常见于标题，可以使用如下的方式解决，利用的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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OverFlow</title>
</head>
<body>
<div style="overflow: auto; border:1px solid red; width:350px; height:100px;">
<table border="0" cellpadding="0" cellspacing="0" width="400" height="400">
<tr>
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
</tr>
<tr>
<td style="background-color:#0000ff; width:200px; height:200px;"></td>
<td style="background-color:#ff0000; width:200px; height:200px;"></td>
</tr>
</table>
</div>
<div id="textOver" style="overflow:hidden;width:100px;text-overflow:ellipsis;white-space:nowrap; "></div>
<input id="textInput" type="text" /><button onclick="input()">确定</button>
</body>
</html>
<script>
function input(){
document.getElementById("textOver").innerHTML=document.getElementById("textInput").value;
}
</script>
时间： 2024-10-20 15:13:50