html - 为什么有一个永无止境的行(文本超过其容器的 div 宽度时不会放置到下一行)

Question

我无法摆脱这个。我正在使用包装器将内容包装在固定宽度的 div 中。这是 my site .如果文本长度太长，则剩余文本不会像通常那样显示在下一行中。

我只是 CSS 的新手。我在标题 div 中使用了 overflow:hidden 只是为了删除一些无法使用 margin: 0 删除的额外边距。我尝试删除 overflow 属性，如果它有任何事情要做但没有运气。

我正在使用来自动态驱动器的 ddsmoothmenu。我也试过删除它，但仍然没有什么好处。

稍后添加

另一个问题 这里是，如果我放大太多以至于浏览器窗口比包装器的宽度短，并且水平滚动似乎包装器的宽度也在减小。我在 nuget 中看到了相同的行为.

这是我编写的一些 CSS:

body {
    background-color: #EEEEEE;
    color: #333;
    font-size: .85em;
    font-family: "Open Sans";
    margin:0 0;
    font-family:'Segoe UI';
}

.wrapper, #main-menu {
    width:1000px;
    margin:0 auto;
}
#page {
    background-color:white;
}

#main {
    min-height:200px;
}
#header {
    height: 80px;
    overflow:hidden;
    background: #80b8dd;
    font-weight:bold;
    color:white;
    background: -moz-linear-gradient(top, #80b8dd 0%, #188edd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80b8dd), color-stop(100%,#188edd));
    background: -webkit-linear-gradient(top, #80b8dd 0%,#188edd 100%);
    background: -o-linear-gradient(top, #80b8dd 0%,#188edd 100%);
    background: -ms-linear-gradient(top, #80b8dd 0%,#188edd 100%);
    background: linear-gradient(to bottom, #80b8dd 0%,#188edd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80b8dd', endColorstr='#188edd',GradientType=0 );
}

#navigation {
    height:37px;
    background-color:#414141;
}

#logo {
    margin:10px 0 10px 10px;
}

请帮忙!!!

Answer 1

您的文本中没有空格。使用 lorem ipsum 进行测试。以下是一些生成器:

• > http://generator.lorem-ipsum.info/
• > http://hipsteripsum.me/ (时髦假想)
• > http://cupcakeipsum.com/ (纸杯蛋糕 ipsum 如果你想要什么有点甜)

在必须处理 gigantic words 的情况下，您可以使用 CSS word-break 属性来打断单词:

word-break: break-all;

如果您只想在适当的断字点打断单词，则可以选择:

word-break: hyphenate;