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>

Answer 2

样式style="white-space: pre-wrap"仅适用于文本中遇到空格的地方。

使用Pre-Wrap换行文本不起作用

2 个答案: