html - Div 中的 Twitter Bootstrap 文本超出了其列

标签 html css twitter-bootstrap

我使用 Twitter Bootstrap 4 Alpha 2 创建了一个测试 html 页面。如下所示,我有三个 div,每个都有 col-md-4。第一个 div 包含用 p 包裹的文本。问题是文本超出了它的容器,占用了其他 2 个 div 的空间。如何将文本保留在自己的栏中?

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />

    <style>
        div {
            border-style: solid;
            border-color: #0000ff;
        }
      </style>
  </head>
  <body>
    <div class="container">

        <div class="row">

            <div class="col-md-4"><p>Box 1 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>

            <div class="col-md-4"><p>Box 2</p></div>
            <div class="col-md-4"><p>Box 3</p></div>

        </div>

    </div>

    <script src="bower_components/jquery/dist/jquery.mi1n.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>


  </body>
</html>

最佳答案

这是 100% 的工作:

p{word-break: break-all;}

关于html - Div 中的 Twitter Bootstrap 文本超出了其列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35875318/

相关文章:

javascript - 使用 ngFor 循环的索引动态设置类或 id

html - 最后一个 child 没有余地

python - PermissionError Errno 13 权限被拒绝

html - 响应式视频未按预期调整

jquery - 使用 RGBa 更改 div 的背景不透明度

jquery - 位置绝对 TD 在可见后留下空白空间

javascript - 在 bootstrap 中滚动后如何创建 scrollspy navbar-fixed-top?

javascript - HTML5 Canvas 文本编辑

html - Cufon 悬停在鼠标移出时保持悬停状态

css - 这些代码中哪一个更好,您会更改代码中的任何内容以改进它,使其变得更好吗?