【CSS】对于超出div部分的处理

浏览数：34 / 时间：2015年06月09日

一个正常的前端攻城狮，一般情况不会把内容布置到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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【CSS】对于超出div部分的处理