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

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


当前回答

你可以像这样使用软连字符:

这将显示为

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

如果装盒不够大,或者

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

如果是的话。

其他回答

使用word-wrap:break-word属性以及所需的宽度。主要是, 宽度以像素为单位,而不是百分比。

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;
}
<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>

这对我很有效

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;

在IE、Firefox、chrome、safari和opera中,如果单词中没有空格(比如一个很长的URL),唯一适用的方法是:

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

我发现这个是防弹的。