为什么这个简单的CSS div不起作用?

Ako*_*kos 0 html css hidden overflow

我有一个div.这很简单.这是下面的CSS代码.

#example {
    background: #dcdcdc;
    background-position: center;
    postition: relative;
    width: 980px;
    text-align: center;
    margin: 0px auto;
    padding: 1px;
    min-height: 30px;
}
Run Code Online (Sandbox Code Playgroud)

HTML代码:

<div id="example">testtesttesttesttesttesttesttesttesttesttesttest</div>
Run Code Online (Sandbox Code Playgroud)

如您所见,它只包含从数据库表中选择的文本.问题是,当文本的长度比屏幕宽时,它不会开始换行,它会过去.我想让它开始一个新的路线.我怎么能这样做?

注意:溢出隐藏在页面上.我只在Chrome 13和FF 3.6中测试了这个页面.

Rob*_*b W 6

自动换行可以解决问题:

word-wrap: break-word;
Run Code Online (Sandbox Code Playgroud)


Roy*_*mir 5

多浏览器答案:

添加这个:

word-break: break-all;
white-space:normal;
 word-wrap: break-word;
Run Code Online (Sandbox Code Playgroud)