css - 非常に長い単語をレスポンシブ要素に適合させますか？

Question

TwitterBootstrapを使用しています。

<div class="container">
    <div class="row-fluid">
        <h1>VeryLongWordHere</h1>
    </div>
</div>

JSfiddle

---

モバイル画面では、テキストが読めなくなります。私に2つの選択肢を残します：

1. 幅が特定のサイズに達したときにテキストサイズを小さくします（これを行うにはどうすればよいですか？）
2. テキストを1行以上にします。<span>例：タグで指定する各セグメント

しかし、私はどちらかを行う方法がわかりません...

Answer 1

私は同様の問題の解決策でこのCSSを使用しています：

word-wrap:break-word

これにより、必要に応じて単語を強制的に分割し、単語を強制的に適合させます。

Answer 2

最初のオプションとして、親要素の幅に合わせてテキストのサイズを動的に変更するjQueryプラグインがいくつかあります。ここにいくつかあります：

• FitText
• SlabText
• BigText

画面サイズが特定のブレークポイントよりも小さい場合は、これらのプラグインのいずれかを使用してテキストのサイズを変更できます。このようなもの：

if (jQuery(window).width()) < 600) {
   jQuery('h1').slabText();
}