Question

我想在一个div中包含一个长字，该div将div的父级边框传递给一个新行。

我已经尝试了Accepted Answer中的.wordwrap解决方案，但它并没有解决问题。

以下是我的尝试：

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

这是JsFiddle：https://jsfiddle.net/yusrilmaulidanraji/otps5c66/5/

Answer 1

您不需要所有white-space

改为使用

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

您也可以使用

word-break : break-word

选中此Answer以查看差异

Answer 2

您放置文字的元素有位置：绝对。在元素中使用position：absolute时，您应该知道几件事：

默认仅尊重内容宽度和高度，其位置不同于绝对/固定。
它不会消耗父元素中的空间，因此t 父元素的结构大小永远不会受其影响。
您可以使用位置：绝对将元素锚定在距离默认（静态）的其他位置的最近父级中，并使用css属性 （上，右，下，左）。

因此你应该从该元素中移除绝对位置，或者因为你已经使用了左属性，也定义了一个正确的属性（即。 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>

<强>更新

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

然而it has a downside，#child 中的每个单词都会自动中断 ，无论它们具有什么尺寸，即使它们位于后代元素中！

<强>段

#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中的break-all

<强>段

#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>

Answer 3

您可以尝试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>

Answer 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>

Answer 5

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

#parent {
    overflow: hidden;
}

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

干杯

Answer 6

你可以尝试这段代码。

#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>

如何根据div的父宽度打破div中的长词？

6 个答案: