0

这是我的评论列表的 html 代码：

<div id='commentbox'>
    <ul id='holder'>        
        <li class='comment'><span class='commenter'>commenter1: </span>
            <span class='commsg'>blabla1</span>
        </li>    
        <li class='comment'><span class='commenter'>commenter2: </span>
            <span class='commsg'>blabla2</span>
        </li>
        <li class='comment'><span class='commenter'>commenter3: </span>
            <span class='commsg'>blablaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa3</span>
        </li>
        <li class='comment'><span class='commenter'>commenter4: </span>
            <span class='commsg'>blabla4</span>
        </li>    
    </ul>
</div>

这是CSS：

.comment{
    border-style:solid;
    width:500px;
}
.commsg{
    font-size: 12px;
    color: #333333;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
.commenter{
    font-family: 'Gill Sans', Verdana;
    font-size: 11px;
    line-height: 14px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-weight: bold;
}

我的问题是，如果我插入像第三条这样的大评论，它就会超出<li>边界。我怎样才能有一定的评论宽度？

问题解决了。谢谢你们俩。

4

2 回答 2

3

要使没有任何空格的长文本转到下一行，您必须将以下样式添加到您的评论容器中：

word-wrap: word-break;

这将自动打破对元素来说太大的单词。

于 2012-05-23T19:39:06.693 回答
0

在 Firefox 中，您当前的标记和样式应该可以正常工作。问题是，您的测试评论中没有空格，因此它被视为一个单词。浏览器不够智能，无法像文字处理器那样用破折号分解单词。

看看这个小提琴。注意巨大的评论。它包裹得很好，并保持<li>原样。

现在看看这个小提琴。看看当单词中没有空格时，它是如何重叠的。浏览器不知道还能用它做什么。

一种解决方法是滚动.comment元素的溢出：

overflow-x:scroll;

见小提琴。缺点是每个元素上的滚动条，看起来不太好，但如果有一个没有空格的大单词（例如超链接等），至少可以完成工作。

于 2012-05-23T19:45:22.577 回答