如何根据 div 的父宽度打破 div 内的长单词？答案

【问题标题】：How to break a long word inside a div, based on the div's parent width?如何根据 div 的父宽度打破 div 内的长单词？
【发布时间】：2017-02-01 02:15:07
【问题描述】：

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

【问题讨论】：

asfasfafafsafafasfasfafafasfad<wbr/>vaavasdvavdvsavsvasvsvs怎么样
@Yusril Maulidan Raji 不要忘记验证对您有帮助的正确答案

标签： html css

【解决方案1】：

您放置文本的元素具有position: absolute。在元素中使用 position: absolute 时，你应该知道几件事：

默认情况下仅尊重其内容的宽度和高度，其位置不同于绝对/固定。
它不会占用父元素中的空间，因此父元素的结构大小永远不会受到它的影响。
您可以使用 css 属性 将具有 position: absolute 的元素锚定在最近的父级中，而其位置不是默认的（静态） （上、右、下、左）。

因此您应该从该元素中删除绝对位置，或者由于您已经在使用左属性，也定义一个右属性（即。right: 0; )

片段

#parent {
  width: 500px;
  height: 500px;
  border: solid 1px;
  position: relative;
}
#child {
  position: absolute;
  top: 20px;
  right: 0;
  left: 300px;
  border: solid 1px;
}
.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">
    Pneumonoultramicroscopicsilicovolcanoconiosis...
  </div>
</div>

更新

如果您不想破坏绝对定位的#child div，通过定义 right: 0，这也会将其锚定到 # 的右侧父div，基于Weedoze's answer，其实可以使用属性word-break:break-all;

但是it has a downside，您在#child 中的每个单词都会自动中断 无论它们有多大，即使它们位于后代元素中！ p>

片段

#parent {
  width: 500px;
  height: 500px;
  border: solid 1px;
  position: relative;
}

#child {
  position: absolute;
  top: 20px;
  left: 300px;
  border: solid 1px;
  text-align: justify;
}

.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-break: break-all;
}

<div id="parent">
  <div id="child" class="wordwrap">
    Pneumonoultramicroscopicsilicovolcanoconiosis...
    
    With word-break: break-all every word will be broken, even little ones! With word-break: break-all every word will be broken, even little ones! 
  </div>
</div>

我在 Firefox 上测试了这个，它成功了！我无法在 Edge 或 IE 上测试，因为我在 Ubuntu 上运行并且我没有现在安装的虚拟机:)

但如果你真的不希望小/正常的单词被破坏，也不希望被破坏的权利锚定#child，当然如果可能的话，那么可能会更好地接近这种布局使用不同的解决方案，Pugazh idea 并不是一个糟糕的开始！

你可以使用 float: left; max-width: calc(100% - 300px); 和 box-sizing: border-box; 得到相同的结果，然后使用超负边距-bottom 将#parent 的其余内容 拉到顶部。这有点 hacky 我知道，可能有更好的方法来获得相同的结果，但这样你就不需要使用 position: absolute 或 word -break：在#child中打破所有）

片段

#parent {
  border: solid 1px;
  width: 500px;
  height: 500px;
}

#child {
  position: relative; /* not really needed, just to be on top for contrast */
  background-color: rgba(255, 255, 255, 0.9);
  text-align: justify;
  box-sizing: border-box;
  border: solid 1px;
  float: left;
  max-width: calc(100% - 300px);
  margin-top: 20px;
  margin-left: 300px;
  margin-bottom: -1000000%; /* Hack to pull #parent content to the top */
}

.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">
    Pneumonoultramicroscopicsilicovolcanoconiosis...
    
    And this little words will not get broken And this little words will not get broken And this little words will not get broken.
    
    Butgiantwordswilldefinitelybreakforsure!
  </div>
   
  This is some content This is some content This is some content This is some content  
  This is some content This is some content This is some content This is some content  
  This is some content This is some content This is some content This is some content 
  This is some content This is some content This is some content This is some content 
  This is some content This is some content This is some content This is some content
  This is some content This is some content This is some content This is some content  
  This is some content This is some content This is some content This is some content
  This is some content This is some content This is some content This is some content 
  This is some content This is some content This is some content This is some content
  This is some content This is some content This is some content This is some content  
  This is some content This is some content This is some content This is some content
  This is some content This is some content This is some content This is some content
  This is some content This is some content This is some content This is some content 
  This is some content This is some content This is some content This is some content
  This is some content This is some content This is some content This is some content  
  This is some content This is some content This is some content This is some content 
  :)
</div>

【讨论】：

好吧，对于position:absolute，由于某些原因我无法删除它。但是，对于right:0px，它可能是一个不错的选择。谢谢！
@YusrilMaulidanRaji - 当您使用 0 定义属性时，您不需要指定度量类型（如 px 或 %），因为 0px 是相同的 0% 或任何其他度量类型： )
以前不知道。谢谢！ :)
@YusrilMaulidanRaji - 更新！ :)
@Daniel 0px vs 0% 有点像"Is 0 octal or decimal?"：嗯，它是......它是0。

【解决方案2】：

你不需要那些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 以查看差异

【讨论】：

添加了代码 sn-p 以直接向您展示它的工作原理:)
好吧，其实我已经在我的 JsFiddle 中尝试过这个：jsfiddle.net/yusrilmaulidanraji/otps5c66/7 但我不知道为什么它不起作用
不幸的是，它也不适用于 FireFox 和 Edge。
word-break: break-all; 中唯一的downside 是容器的边缘会破坏其路径上的每个单词，无论大小如何单词有！ ie大字或小字
好的。最后，就我而言，不仅我使用了word-break : break-all;，而且我还必须添加display: inline-block; white-space: pre-wrap; 以使其听起来。谢谢啊！

【解决方案3】：

你可以试试这个代码。

#parent {
        width: 500px;
        height: 500px;
        border: solid 1px;
        position: relative;
      }
      #child {
        margin-top: 20px;
        margin-left: 300px;
        border: solid 1px;
      }
      .word-wrap {
      white-space: pre-wrap;
      word-wrap: break-word;
    }

<body>
  <div id="parent">
    <div id="child" class="word-wrap">
      GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOD!
    </div>
  </div>
  </body>

【讨论】：

【解决方案4】：

.wordwrap { 
  word-break : break-all;
}

#parent {
  width: 500px;
  height: 500px;
  border: solid 1px;
 }
#child {
  margin-top: 20px;
  margin-left: 300px;
  border: solid 1px;
}

<div id="parent">
  <div id="child" class="wordwrap">
    asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs
  </div>
</div>

【讨论】：

这种情况下最好使用break-word
是的，但在一般情况下，Break-all 更好

【解决方案5】：

您可以尝试margin，而不是绝对定位。检查以下示例。

Updated fiddle

#parent {
  width: 500px;
  height: 500px;
  border: solid 1px;
  position: relative;
}
#child {
  margin-top: 20px;
  margin-left: 300px;
  border: solid 1px;
}
.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>

【讨论】：

虽然这似乎是一个选项，但 OP 使用绝对定位可能有充分的理由，所以我认为“破坏性”最小的选项是 @Weedoze's answer
是的，由于某些原因，我必须使用左上角的属性。但是感谢您的选择！

【解决方案6】：

您应该将此规则添加到您的 CSS：

#parent {
    overflow: hidden;
}

.wordwrap {
   white-space: no-wrap;
   text-overflow: ellipsis;
}

干杯

【讨论】：

嗯，它有不同的结果。相反，文本被父级的外边框重叠。重叠的文本应该换行。