Question

我已遍布此网站，无法找到问题的解决方案。首先，这是我的问题的图像。（具有“sssss”的div应垂直扩展）。所以当div到达边界时，div的内容应该转到下一行。任何建议都非常感谢。

这是我的代码。

HTML

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <LINK rel=StyleSheet href="styles/StyleSheet.css" type="text/css" media=screen>
</head>
<body>
    <form id="Form1">
    <div id="header">
        <div id="header-center">
            <div id="logo">Logo</div>

            <div id="search-user">
                <form action="" id="SearchUser">
                    Search User: <asp:TextBox ID="TextBox1" runat="server">           </asp:TextBox>
                </form>
            </div>
        </div>


        <div id="nav-menu">
            <ul>
                <li><a href="#">Account</a></li>
                <li><a href="#">Burndown Chart</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Extra</a></li>
                <li><a href="#">Extra</a></li>
            </ul>
        </div>
    </div>

    <div id="wrapper">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>


   </form>
</body>
</html>

CSS

html, body
{
padding: 0px;
margin: 0px;
text-align: center;
background-color: #f3f4f9; 
font-family: Verdana;
border: 0px;
}

#header 
{
width: 100%;
background-color: #0066CC;
}

#header-center 
{
margin: 0 auto;  
width: 800px;
height: 80px;
}

#logo 
{
float: left;
margin-top: 13px;
height: 50px;
font-size: 40px;
color: White;
font-weight: bold;
}

#search-user 
{
float: right;
color: White;
font-size: 11px;
font-weight: bold;
margin-top: 25px;
}

#nav-menu 
{
width: 100%;
margin: 0 auto;
border-top: 1px solid #003366;
clear: both;
}

#nav-menu ul
{
list-style-type:none;
margin:0;
padding:0;
height: 48px;
background-image: url(../images/menu-ul-bg.png);
}

#nav-menu ul li
{
display:inline;
line-height: 50px;
}

#nav-menu ul li a
{
padding: 0px 40px 0px 40px;
text-decoration: none;
color: Black;
font-size: 14px;
}

#nav-menu ul li a:hover
{
color: White;
}

#wrapper 
{
margin: 0 auto;
width: 200px;
border: 1px solid black;
}

Answer 1

这是因为你有一个长字符串，浏览器不会自行断开。如果您使用CSS3 smaller words 或自动换行属性，如果将其分解为word-break，则高度会自动调整。

例如：word-break:break-all;

Answer 2

您需要添加#wrapper样式：

word-wrap: break-word;

这会使像'ssssssssssssssssssssssssss'这样的长单词变成一个长字，然后沿着div宽度移动。

Div不会随着内容扩展

2 个答案: