为什么文本溢出跨越twitter bootstrap？

Question

http://www.responsinator.com/?url=http%3A%2F%2Ftoplessproductions.com%2Fyuv%2Fproblem%2Ftextoverflow.html

请注意，“Crappy Android portrait 240 x 320”会使卡片的文字溢出。这有规范的解决方案吗？我可以为min-width决定body，但这只会解决地毯下面的问题。

Answer 1

您需要将CSS媒体查询设置为缩小到较小浏览器上的文本

@media (max-width: 480px) {
  h2 {
    font-size: 10px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

这样的东西适用于手机和h2s。

Answer 2

您可以使用word-wrap: break-word确保文字不会溢出：

@media (max-width: 480px) {
    h2 {
        word-wrap: line-break;
    }
}

我还注意到，由于布局错误，你会失去一些宽度。您忘记了row元素，并且您正在使用span4类覆盖.main_link定位属性。背景颜色，额外填充，边距等不应与span#处于同一级别。原生well元素符合您要查找的行为。

因此，要恢复整个媒体宽度并修复布局，您可以使用如下标记：

<div class="container">
    <div class="row">
        <div class="span4">
            <div class="well main_link">
                ...
            </div>
        </div>
    </div>
    ...
</div>