Question

我正在使用Twitter Bootstrap。

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

在移动屏幕上，文字变得不可读;给我两个选择：

但是我不知道怎么办......

Answer 1

我在我的解决方案中使用这个CSS来解决类似的问题：

word-wrap:break-word

如果有必要，这将迫使单词破坏以强制它们适合。

Answer 2

对于您的第一个选项，有许多jQuery插件可动态调整文本大小以适应父元素的宽度。以下是一些：

当屏幕尺寸小于某个断点时，您可以使用这些插件中的任何一个调整文本大小。像这样：

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

Answer 3

如果要求在小屏幕尺寸（响应屏幕）上调整非常长的单词的大小，则最小宽度可以是任何最小宽度，现在，如果用户缩小屏幕尺寸，则单词会破裂并适合屏幕尺寸。 / p>

  .wallet__address {
    min-width: 50px;
    word-break:break-word;
  }

<html>
    <div className="wallet__address">
      <p>
        0x1453Dbb0x1453Dbb0x1453Dbb0x1453Dbb0x1453Dbb
      </p>
    </div>
</html>