html - 使用 Pre-Wrap 包装文本不起作用

Question

我有这个代码:

<div class="well details-form">
<div class="row">
        <div class="col-md-6">Test:</div>
        <div class="col-md-6" style="white-space: pre-wrap">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</div>
    </div>

</div> 

我正在尝试获取包含要换行的长文本的 div。这只是一个测试，但长度可能相同，因此需要换行。

我如何将其包装起来？

这是一个Bootply .

感谢任何帮助。

Answer 1

使用 word-break: break-all 而不是 white-space: pre-wrap。

在 MDN 上阅读更多内容:https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

.details-form {
  width: 70%;
  margin: auto;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="well details-form">
  <div class="row">
    <div class="col-md-6">Test:</div>
    <div class="col-md-6" style="
  word-break: break-all;
">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</div>
  </div>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>