html – 如何打破div中的长字,基于div的父宽度？

我想把一个长长的词包裹在一个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看到的区别