css - Twitter Bootstrap V3 中的内容重叠

Question

我遇到了一个问题，即放入列中的任何内容都会溢出到它旁边的内容中。

这方面的一个例子是：

<div class="row">
<div class="col-md-8"><p>ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p></div>
<div class="col-md-4">.col-md-4</div>
</div>

p 进入第 4 列，当它到达它应该跨越的 8 列的末尾时，我原以为它会进入下一行......

我在这里错过了什么吗？

谢谢你的帮助。

Answer 1

另一种解决方案是

.break{ word-wrap: break-word;}

这将强制换行，而溢出隐藏只是隐藏文本。

Answer 2

这只是 HTML 渲染的一般方面。你会在哪里打破p's？没有逻辑的地方可以打破它，所以它保持在一条线上。

您可以做的最好的事情是设置以下内容：

.col-md-8 { overflow: hidden; }

这将隐藏额外的 p，而不是让它们溢出到其他内容上。这不是一个理想的解决方案，因为它使内容不可用而不是破坏设计。

8 列仅指定p元素边界框的宽度。内容尽可能地适合那个盒子，只是太大而不能被打破的内容（也考虑一个非常大的图像）会溢出。