一个正常的前端攻城狮,一般情况不会把内容布置到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 οnclick="input()">确定</button>
</body>
</html>
<script>
function input(){
document.getElementById("textOver").innerHTML=document.getElementById("textInput").value;
}
</script>