html - 空白を含む div の重複を避ける方法: nowrap プロパティ

Question

いくつかのリンクを列に配布したい。私はこのcssを使用します：

.cols{
    float: left;
    width: 25%; 
    white-space: nowrap;
}

HTML:

<div class="CRMP_WP_QUICKADS_cols">
    text...
</div>

イメージは、結果の出力を示しています。

重複を避けるにはどうすればよいですか？

Answer 1

列のを超えるコンテンツをカットオフするように設定overflowします。hiddenwidth

.cols {
 /* ... */
 overflow:hidden;
 text-overflow:ellipsis; /* Hint that some text is hidden */
}

Answer 2

可能な解決策：

• 最後の部分を非表示にすることができます:overflow: hidden; text-overflow: ellipsis;
• divの幅を増やすことができます

Answer 3

3つのオプション

1. 幅を広げる
2. divの幅宣言を削除します（テキストに合わせて拡張する場合）
3. テキストを非表示にする場合は、divに設定overflow: hiddenします

Answer 4

widthオーバーフローしたテキストを補正するには、列の数を増やす必要があります。