Question

我目前正在尝试制作一个100％与整个屏幕一样宽的div。我通过编写代码来完成它：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
    <title>100% width</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
        html,body {
            padding:0px;
            margin:0px;
            width:100%;
        }
    </style>

</head>

<body>

    <div style="background-color:yellow;">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>

</body>

</html>

它在正常的缩放设置下工作正常，但是当我进行最大放大（FireFox 6.0.2）时，div内的字母会超出黄色框。有没有办法让黄色框也延伸到窗口的末尾？

感谢。

Answer 1

选项1 如果您想将文本保留在黄色框内，请尝试添加此CSS样式。

div {word-wrap: break-word;}

这将导致文本转到下一行而不是继续。

选项2 或者您可以尝试使用CSS样式隐藏通过div边框的内容

div {overflow:hidden;}

Answer 2

选项1 如果您想将文本保留在黄色框内，请尝试添加此CSS样式。

div {word-wrap: break-word;}

这将导致文本转到下一行而不是继续。

选项2 或者您可以尝试使用CSS样式隐藏通过div边框的内容

div {overflow:hidden;}

内容超出div 100％

2 个答案: