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

私の問題は、3番目のような大きなコメントを挿入すると、<li>境界線から外れることです。どうすれば特定のコメント幅を設定できますか？

問題が解決しました。あなたがた両方に感謝します。

4

2 に答える 2

3

空白なしで長いテキストを作成するには、次の行に移動し、コメントコンテナに次のスタイルを追加する必要があります。

word-wrap: word-break;

これにより、要素に対して大きすぎる単語が自動的に分割されます。

于 2012-05-23T19:39:06.693 に答える
0

Firefoxでは、現在のマークアップとスタイルは正常に機能するはずです。問題は、テストコメントにスペースが含まれていないため、1つの単語として扱われることです。ブラウザは、ワードプロセッサのように、単語をダッシュ​​で分割できるほど賢くはありません。

このフィドルをチェックしてください。巨大なコメントに注意してください。うまく包み込み、<li>幅はそのままにしておきます。

今、このフィドルをチェックしてください。単語にスペースがない場合、どのように重なるかを確認してください。ブラウザはそれを他に何をすべきかを知りません。

.commentそれを回避する1つの方法は、要素からオーバーフローをスクロールすることです。

overflow-x:scroll;

フィドルを参照してください。欠点は、各要素のスクロールバーです。見栄えはよくありませんが、スペースのない巨大な単語（ハイパーリンクなど）がある場合は、少なくとも作業を完了できます。

于 2012-05-23T19:45:22.577 に答える