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

I want to wrap a long word inside a div that passes the border of the div's parent into a new line.

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

I have tried the .wordwrap solution from this Accepted Answer, but it doesn't solve the problem.

我已经尝试过这个被接受的答案中的.wordwrap解决方案,但它没有解决问题。

Here is what I have tried:

这是我尝试过的:

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

Here is the JsFiddle: https://jsfiddle.net/yusrilmaulidanraji/otps5c66/5/

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

6 个解决方案

#1

You don't need all those white-space

你不需要所有这些空白区域

Instead use

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

You can also use

你也可以使用

word-break : break-word

Check this Answer to see the difference

检查此答案以查看差异

#2

The element where you put the text have position: absolute. There is a couple of things you should know when using position: absolute in an element:

放置文本的元素的位置为:absolute。在元素中使用position:absolute时,您应该知道几件事:

• It'll by default only respect it's content width and height with a position different than absolute/fixed.

  它默认只尊重它的内容宽度和高度,其位置不同于绝对/固定。

• It'll not consume space in the parent element, so the structural size of the parent element will never be affected by it.

  它不会占用父元素中的空间,因此父元素的结构大小永远不会受其影响。

• You can anchor an element with position: absolute in the nearest parent with other position than the default (static), with the css properties (top, right, bottom, left).

  您可以使用css属性(顶部,右侧,底部,左侧)锚定一个元素,其中position:absolute位于最近的父级中,而其他位置不是默认位置(静态)。

Therefore you should either remove the position absolute from that element, or since you are already using a left property, define a right property too (ie. right: 0;)

因此,您应该从该元素中删除绝对位置,或者因为您已经在使用left属性,所以也要定义一个右属性(即右:0;)

SNIPPET

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

Update

If you don't want to compromise the absolute positioned #child div, by defining right: 0, which would also anchor it to the right side of the #parent div, based on Weedoze's answer, you can in fact use the property word-break: break-all;

如果您不想妥协绝对定位的#child div,通过定义right:0,它也会将其锚定到#parent div的右侧,基于Weedoze的答案,您实际上可以使用属性字 - 休息:休息

However it has a downside, every word you have inside #child will automatically break no matter what size they have, even if they are inside a descendent element!

然而它有一个缺点,你在#child里面的每一个字都会自动打破,无论它们有多大,即使它们在一个后代元素内!

SNIPPET

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

I tested this one on Firefox and it worked! I couldn't test on Edge or IE because I'm running on Ubuntu and I don't have a virtual machine installed right now :)

我在Firefox上测试了这个,它运行了!我无法在Edge或IE上测试,因为我在Ubuntu上运行而且我现在没有安装虚拟机:)

But if you really don't want the little/normal words to be broken, nor a compromised right anchored #child, and of course if possible, then perhaps would be better to approach this layout with a different solution, Pugazh idea is not a bad start!

但是,如果你真的不希望破坏小/正常的话,也不希望被破坏的权利锚定#child,当然如果可能的话,那么用不同的解决方案来处理这种布局可能会更好,Pugazh的想法不是糟糕的开始!

You could use float: left; max-width: calc(100% - 300px); and box-sizing: border-box; to get the same results, then using a super negative margin-bottom to pull the rest of #parent's content to the top. It's a bit hacky I know, probably there are better ways to get the same results, but this way you wouldn't need to use position: absolute nor word-break: break-all in #child)

你可以使用float:left;最大宽度:计算(100% - 300px);和盒子大小:边框;为了获得相同的结果,然后使用超级负边距底部将#parent的其余内容拉到顶部。我知道有点hacky,可能有更好的方法来获得相同的结果,但这样你就不需要使用position:absolute也不需要使用word-break:break-all in #child)

SNIPPET

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

#3

Instead of absolute positioning you can try margin. Check below example.

您可以尝试保证金而不是绝对定位。请查看以下示例。

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>

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

#5

You should add this rules to your CSS:

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

#parent {
    overflow: hidden;
}

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

Cheers

#6

you can try this code.

你可以试试这段代码。

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