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>

这是CS:

.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;
}

我的问题是,如果我插入像第三条这样的大评论, 它会从边框中流出。我怎么能有一定的评论宽度?

问题解决了,谢谢你们

Answer 1

在 Firefox 中, 您当前的标记和样式应该很好。问题是, 您的测试注释没有空格, 所以它被当作一个单词处理。浏览器不够聪明, 无法用破折号( 如文字处理器) 打破单词。

查看此 < a href=" "http://jsfiddle.net/BGEz9/" rel = "nofollow" > fiddle 。注意这个巨大的注释。它包的很好, 并保持了 ; li> 的宽度。

现在看看这个 < a href=> "" "http://jsfiddle.net/BGEZ9/1/" rel="nofollow" >tidle 。当字里没有空格时, 它会重叠。浏览器不知道该用它做什么。

一种方式是滚动您 .comment 元素的溢出 :

overflow-x:scroll;

见“http://jsfiddle.net/BGEZ9/3/” rel=“nofollow” >tidle 。下边是每个元素的滚动条,这些滚动条看起来并不伟大,但至少如果有一个没有空格的大单词(如超链接等),就完成这项工作。

Answer 2

要在无任何白空格的长文本中生成到下一行, 您必须在批注- 容器中添加以下样式 :

word-wrap: word-break;

这将自动断开对元素来说太大的单词。

友情链接