如何避免重叠包含空格的div：nowrap属性

Question

我想在列中分发一些链接。我用这个css：

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

HTML：

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

图像显示结果输出：

如何避免重叠？

Answer 1

将overflow设置为hidden以切断超出列width的所有内容：

.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以补偿溢出的文本。