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

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


当前回答

来自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 { 显示:块; 显示:-webkit-box; 高度:20 px; Margin: 3px auto; 字体大小:14 px; 行高:1.4; -webkit-line-clamp: 1; -webkit-box-orient:垂直; 溢出:隐藏; 文本溢出:省略; }

属性text-overflow:省略号add…而线夹则显示线数。

你可以使用这个CSS

p {
  width: min-content;
  min-width: 100%;
}

我用过自举法。 我的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;
}
<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>

来自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;
}

这里有更多的例子。