Question

这是我的HTML：

<div class="container-fluid">
    <div class="row post img-rounded">
        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</div>

问题是，最终用户选择跨度内的内容。如果跨度内的内容是一个非常长的单词，则会出现一个水平滚动条，并且该单词在div之外延伸。是否有非hacky（可能是Twitter Bootstrap 3）基本上包装单词的方式，以便它不会延伸到div之外，从而导致水平滚动条？

如果没有，解决问题的最佳方法是什么？

Answer 1

要打破，请使用word-wrap: break-word，但是您缺少包裹col-*-*的引导程序span

.row div {
  background: red
}
.row:first-of-type span {
  word-wrap: break-word
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row post img-rounded">
    <div class="col-xs-2">
      <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
  </div>
  <hr />
  <div class="row post img-rounded">
    <div class="col-xs-2">
      <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
  </div>
</div>

如何使用Twitter Bootstrap 3在容器内包装长字？

1 个答案: