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

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


当前回答

我用过自举法。 我的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;
}

其他回答

将此CSS添加到段落中。

width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; 
padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left;

在HTML正文中尝试:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

在CSS正文尝试:

background-size: auto;

table-layout: fixed;

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

这将显示为

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

如果装盒不够大,或者

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

如果是的话。

try:

overflow-wrap: break-word;
div {
    /* Set a width for element */
    word-wrap: break-word
}

“换行”解决方案只适用于IE和支持CSS3的浏览器。

最好的跨浏览器解决方案是使用您的服务器端语言(php或其他)来定位长字符串,并定期在其中放置html实体&#8203; 这个实体很好地分割了长单词,并且适用于所有浏览器。

e.g.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#8203;aaaaaaaaaaaaaaaaaaaaaaaaaaaaa