html - 为什么文本溢出跨越 twitter boostrap？

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>