Question

我做了一个you can see here的响应式布局。这是代码：

<div class="frame-content">
  <div class="row">
    <div class="command-buttons tile col-xs-6 btn">
      <h3 class="title">Appuntamenti futuri</h3>
      <p>Hello Blue, this is a colored tile.</p>
    </div>
    <div class="command-buttons tile col-xs-6 btn">
      <h3 class="title">Storico</h3>
      <p>Hello Blue, this is a colored tile.</p>
    </div>
  </div>
  <div class="row">
    <div class="command-buttons tile col-xs-12 btn">
      <h3 class="title">Prenota</h3>
      <p>Hello Blue, this is a colored tile.</p>
    </div>
  </div>
  <div class="row">
    <div class="command-buttons tile col-xs-6 btn">
      <h3 class="title">Card</h3>
      <p>Hello Blue, this is a colored tile.</p>
    </div>
    <div class="command-buttons tile col-xs-6 btn">
      <h3 class="title">Abbonamento prepagate</h3>
      <p>Hello Blue, this is a colored tile.</p>
    </div>
  </div>
</div>

现在的问题是，如果我减小窗口尺寸（当然还有移动智能手机），文本会与另一个容器重叠。我该如何防止这种情况发生？

Answer 1

问题源于Bootstrap的btn类添加的属性：white-space: no-wrap。这可以防止文本换行到新行。您可以使用简单的CSS属性覆盖它：white-space: normal

但是，较长的单词仍然可以溢出，因为默认情况下，单词只会在单词之间而不是单词之间发生。要解决此问题，您可以添加两个附加属性之一，word-wrap: break-word或word-break: break-all。

word-wrap在大多数布局中通常看起来更好，因为它试图避免打破一个字，除非它需要。
word-break只会在需要时立即中断，但它具有更广泛的浏览器支持。

示例，使用自动换行：

.command-buttons {
  white-space: normal;
  word-wrap: break-word;
}

有用的链接：
word-wrap browser support breakdown
word-break browser support breakdown

您使用word-wrap更新了fiddle 您使用word-break更新了fiddle。

如何使文本适应容器维度？

1 个答案: