像aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa这样的文本超过了div的宽度(比如200px),如何被包装?

我是开放的任何一种解决方案,如CSS, jQuery等。


当前回答

在引导3中,确保空白没有设置为“nowrap”。

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

其他回答

来自CSS技巧的例子:

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

这里有更多的例子。

试试这个:

div {
    width: 200px;
    word-wrap: break-word;
}

我用过自举法。 我的html代码看起来像..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

一个服务器端解决方案,对我来说是:$message = wordwrap($message, 50, "<br>", true);其中$message是一个字符串变量,包含要拆分的单词/字符。50是任何给定段的最大长度,“<br>”是你想要每(50)个字符插入的文本。

这对我很有效

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;