html - 如何根据 div 的父宽度在 div 中打断一个长单词？

Question

我想在一个 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/

Answer 1

你不需要所有那些 white-space

改为使用

.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看看区别