使用预包装来包装文本不工作。

I have this code:

我有这段代码:

<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>

I am trying to get the div that contains the long text to wrap. That is just a test, but the length could be the same, hence the need for wrapping.

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

How do I get this to wrap?

我怎么得到这个包装?

Here is a Bootply.

这是bootp。

Any help is appreciated.

任何帮助都是感激。

2 个解决方案

#1

Use word-break: break-all instead of white-space: pre-wrap.

使用word-break: break-all而不是空白:pre-wrap。

在MDN上阅读更多:https://developer.mozilla.org/en- us/docs/web/css/wordbreak。

.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>

#2

The style style="white-space: pre-wrap" only works where there's a space encountered in the text.

风格风格="白色空间:预包装"只适用于文本中遇到的空间。

#1