Question

我开始学习Bootstrap，我无法理解这种行为。

.row内的col元素的文字溢出以进入下一个<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <h1>Heading</h1> <div class="row"> <div class="col-md-6"> HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHel </div> <div class="col-md-6"> man </div> </div>为什么会发生这种情况？我该怎么做才能将文字包起来。

＆＃13;

match_parent

＆＃13;

Answer 1

div中的单词显示为全长，以保证单词的完整性。如果单词到达div的末尾时将其包装在新行上，请在容器上使用名为word-wrap的CSS属性。

您也可以根据自己喜欢的行为使用-ms-word-break: break-all;word-break: break-all;

<h1>Heading</h1>
<div class="row">
  <div class="col-md-6" style="word-wrap: break-word;">
    HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHel

  </div>
  <div class="col-md-6" style="word-wrap: break-word;">
    man
  </div>
</div>

bootstrap网格col溢出

1 个答案: