Question

如你所见，＆＃34; 11111111 ...＆＃34;和＆＃34; 22222222 ...＆＃34;重叠。我认为这是因为前者超过了它所属的网格，即<div class="col-xs-6 col-lg-4">。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>
    Test
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-lg-4">
        <h2>11111111111111111111111111111111</h2>
      </div>
      <div class="col-xs-6 col-lg-4">
        <h2>22222222222222222222222222222222</h2>
      </div>
    </div>
  </div>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

＆＃13;

在我的浏览器中看起来像这样（Safari版本9.1.2（11601.7.7））：

我做错了什么？

Answer 1

将word-wrap: break-word;添加到h2元素。因为自动换行的默认设置是正常的。它仅包含有限的分割标记集（例如：空格，连字符）。

HTML：

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-lg-4">
      <h2 class="w-wrap">11111111111111111111111111111111</h2>
      <p class="text-muted ">11111111111111111111111111111111</p>
    </div>
    <div class="col-xs-6 col-lg-4">
      <h2 class="w-wrap">22222222222222222222222222222222</h2>
      <p class="text-muted">22222222222222222222222222222222</p>
    </div>
  </div>
</div>

CSS：

.w-wrap{
  word-wrap: break-word;
}

在bootstrap3中超出网格的文本

1 个答案: