我想把一个长长的词包裹在一个div里面,将div的父母的边界传递到一个新的行.
我试过这个Accepted Answer的.wordwrap解决方案,但并不能解决问题.
这是我试过的：
#parent {
width: 500px;
height: 500px;
border: solid 1px;
position: relative;
}
#child {
top: 20px;
left: 300px;
border: solid 1px;
position: absolute;
}
.wordwrap {
white-space: pre-wrap;
/* CSS3 */
white-space: -moz-pre-wrap;
/* Firefox */
white-space: -pre-wrap;
/* Opera <7 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* IE */
}
<div id="parent">
<div id="child" class="wordwrap">
asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs
</div>
</div>
这是JsFiddle：https://jsfiddle.net/yusrilmaulidanraji/otps5c66/5/
解决方法
你不需要所有这些空格
而是使用
.wordwrap {
word-break : break-all;
}
#parent {
width: 500px;
height: 500px;
border: solid 1px;
position: relative;
}
#child {
top: 20px;
left: 300px;
border: solid 1px;
position: absolute;
}
.wordwrap {
word-break: break-all;
}
<div id="parent">
<div id="child" class="wordwrap">
asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs
</div>
</div>
你也可以使用
word-break : break-word
检查这个Answer看到的区别
