为什么文本溢出会在 twitter bootstrap 中跨越？答案

【问题标题】：Why does text overflow spans in twitter boostrap?为什么文本溢出会在 twitter bootstrap 中跨越？
【发布时间】：2012-09-23 18:33:12
【问题描述】：

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

请注意，“Crappy Android Portrait 240 x 320”会使卡片的文字溢出。有没有一个规范的解决方案？我可以为body 选择min-width，但这只会掩盖地毯下的问题。

【问题讨论】：

您可以做很多事情。这仅取决于您的需求。您可以为内容 div 设置更大的宽度，您可以剪切更大的文本，您可以创建一个检查标题字符数的函数，如果超过 10（例如）使用较小的字体大小，添加额外滚动到内容 div 和许多其他内容。
我希望引导程序选择一个。也许是我太天真了。
好吧，大多数解决方案都涉及少数 css 选项集，并且由于移动设备、操作系统和浏览器的变化，将这些东西留在它们上并不是一个好的解决方案。例如，类似这样的事情可能会被 web-kit 浏览器很好地处理，但不能被 IE 或 Android 设备处理。
您可以为每个 header 创建一个跨度或 div，并为其添加宽度或其他内容以使其粘贴在白板下方

标签： html css twitter-bootstrap

【解决方案1】：

您需要设置一个 CSS 媒体查询以在较小的浏览器上缩小为文本

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

类似的东西适用于手机和 h2s。

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：