Question

我在php中有一个论坛系统，但是当这些帖子出来时，如果它们很长，它们会像这样结束，

html,
body {
    height:100%;
    width:100%;
    background: url(/include/images/dirt.png);
    }

.center-container {
    margin-top:15px;
    margin-right:15%;
    margin-left: 15%;
    box-shadow: 0 1px 10px #a7a7a7, 0 1px 0 #fff;
    padding:0.5em;
    }

.button {
    border-top: 1px solid #002136;
    background: #033e66;
    background: -webkit-gradient(linear, left top, left bottom, from(#031826), to(#033e66));
    background: -webkit-linear-gradient(top, #031826, #033e66);
    background: -moz-linear-gradient(top, #031826, #033e66);
    background: -ms-linear-gradient(top, #031826, #033e66);
    background: -o-linear-gradient(top, #031826, #033e66);
    padding: 5px 10px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
        -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
        box-shadow: rgba(0,0,0,1) 0 1px 0;
        text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
        font-size: 14px;
        font-family: Georgia, serif;
        text-decoration: none;
        vertical-align: middle;
        padding-bottom:3px;
        margin-right:5px;
    }
.button:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
    }
.button:active {
    border-top-color: #1b435e;
    background: #1b435e;
    }

.sidebar1 {
    margin-top:15px;
    float:left;
    width:13%;
    display:inline-block;
    box-shadow: 0 1px 10px #a7a7a7, 0 1px 0 #fff;
    }

.sbutton {
    border-top: 1px solid #002136;
    background: #033e66;
    background: -webkit-gradient(linear, left top, left bottom, from(#031826), to(#033e66));
    background: -webkit-linear-gradient(top, #031826, #033e66);
    background: -moz-linear-gradient(top, #031826, #033e66);
    background: -ms-linear-gradient(top, #031826, #033e66);
    background: -o-linear-gradient(top, #031826, #033e66);
    padding: 5px 10px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
        -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
        box-shadow: rgba(0,0,0,1) 0 1px 0;
        text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
        font-size: 14px;
        font-family: Georgia, serif;
        text-decoration: none;
        vertical-align: middle;
        padding-bottom:3px;
        display:block;
    }
.sbutton:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
    }
.sbutton:active {
    border-top-color: #1b435e;
    background: #1b435e;
    }

是否有一个CSS规则，我可以用它来换行到下一行？

编辑：解决了！这实际上似乎是Firefox的一个问题。不知道为什么，但如果在firefox中设置了宽度，即使它是最大宽度，它也会因为某种原因而溢出框

Answer 1

您可以使用CSS3文本换行属性：

http://www.w3schools.com/cssref/css3_pr_text-wrap.asp

p.test {text-wrap:unrestricted;}

Answer 2

你的链接不起作用，所以我在这里猜测。

您的div很可能会扩展到屏幕宽度之外，这意味着内容将会扩展。您可以尝试将div的max-width属性设置为80％（或更小），并将任何文本包装在p-tags中。

要绝对确定，请将其与superUntitled的答案结合起来并设置：

p.test {word-wrap:break-word; }

修改我尝试了你的例子，它适用于我this JsFiddle example

尝试css重置like this

Answer 3

是的，CSS3自动换行与连字符属性

结合使用

p.test {
  word-wrap:break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

文本流出包含Div

3 个答案: