Question

这是我的评论列表的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>边界。我怎么能有一定的评论宽度？

问题解决了。谢谢你们两个。

Answer 1

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

word-wrap: word-break;

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

Answer 2

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

查看此fiddle。请注意巨大的评论。它包裹得很好，并保持<li>宽度。

现在查看此fiddle。看看当单词中没有空格时，它会重叠。浏览器不知道还有什么用它。

绕过它的一种方法是滚动.comment元素的溢出：

overflow-x:scroll;

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

如何在注释框中限制每个<li>元素？</li>

2 个答案: