css - 让一个很长的词适合响应式元素？

Question

我正在使用 Twitter 引导程序。

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

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

但是我也不知道该怎么做...

score 14 · Accepted Answer

我在解决类似问题时使用了这个 CSS：

word-wrap:break-word

这将迫使单词在必要时打破以迫使它们适应。

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

如果要求在小屏幕尺寸（响应式屏幕）上调整非常长的单词的大小，min-width 可以是任何最小宽度，现在如果用户缩小屏幕尺寸，那么单词将打破并适应屏幕尺寸。

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

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

3 回答 3