像aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa这样的文本超过了div的宽度(比如200px),如何被包装?
我是开放的任何一种解决方案,如CSS, jQuery等。
像aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa这样的文本超过了div的宽度(比如200px),如何被包装?
我是开放的任何一种解决方案,如CSS, jQuery等。
当前回答
<p style="word-wrap: break-word; word-break: break-all;">
Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>
其他回答
试试这个
div { 显示:块; 显示:-webkit-box; 高度:20 px; Margin: 3px auto; 字体大小:14 px; 行高:1.4; -webkit-line-clamp: 1; -webkit-box-orient:垂直; 溢出:隐藏; 文本溢出:省略; }
属性text-overflow:省略号add…而线夹则显示线数。
在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;
我用过自举法。 我的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;
}
使用word-wrap:break-word属性以及所需的宽度。主要是, 宽度以像素为单位,而不是百分比。
width: 200px;
word-wrap: break-word;
来自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;
}
这里有更多的例子。