像aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa这样的文本超过了div的宽度(比如200px),如何被包装?
我是开放的任何一种解决方案,如CSS, jQuery等。
像aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa这样的文本超过了div的宽度(比如200px),如何被包装?
我是开放的任何一种解决方案,如CSS, jQuery等。
当前回答
将此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;
其他回答
div {
/* Set a width for element */
word-wrap: break-word
}
“换行”解决方案只适用于IE和支持CSS3的浏览器。
最好的跨浏览器解决方案是使用您的服务器端语言(php或其他)来定位长字符串,并定期在其中放置html实体​ 这个实体很好地分割了长单词,并且适用于所有浏览器。
e.g.
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<p style="word-wrap: break-word; word-break: break-all;">
Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>
跨浏览器
.wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
来自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;
}
这里有更多的例子。
try:
overflow-wrap: break-word;