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为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. overflow: hidden如果要隐藏文本，请在 div 上设置

Answer 4

您必须增加width列数以补偿溢出的文本。