html - Twitter Boostrapでテキストオーバーフローが発生するのはなぜですか？

Question

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

「CrappyAndroidportrait240 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>