How to break a long word inside a div, based on the div's parent width?

Question

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

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

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/

How about `asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs` — mplungjan, Sep 23 '16 at 09:18
@Yusril Maulidan Raji Don't forget to validate the correct answer that helped you — Weedoze, Sep 26 '16 at 06:23

score 14 · Accepted Answer · edited May 23 '17 at 12:06

14

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

edited May 23 '17 at 12:06

Community

1
1

answered Sep 23 '16 at 09:18

Weedoze

13,683
1
33
63

Code snippet added to show you directly that it works :) – Weedoze Sep 23 '16 at 09:20
well, actually I have tried this one in my JsFiddle: https://jsfiddle.net/yusrilmaulidanraji/otps5c66/7/ But I have no clue why it doesn't work – Yusril Maulidan Raji Sep 23 '16 at 09:23
4

and also, unfortunately, it doesn't work on FireFox and Edge either. – Yusril Maulidan Raji Sep 23 '16 at 09:31
The only [_downside_](http://stackoverflow.com/a/15137272/6399857) of _word-break: break-all;_ is that the container's edge will break every word on its path, **no matter what size the word has!** _i.e. either giant or small words_ – Daniel Sep 24 '16 at 00:23
Ok then. In the end, in my case, not only I used the `word-break : break-all;`, but also I had to add `display: inline-block; white-space: pre-wrap;` as well in order to make it sounds. Thanks anw! – Yusril Maulidan Raji Sep 29 '16 at 07:52

score 3 · Answer 2 · edited May 23 '17 at 12:19

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:

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

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;)

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;

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!

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 :)

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!

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)

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>

Well, for the `position:absolute`, I can't remove it for some reasons. However, for the `right:0px`, it could be a strong option. Thanks! — Yusril Maulidan Raji, Sep 23 '16 at 10:04
@YusrilMaulidanRaji - You don't need to specify a measure type (like px or %) when you're defining property with 0, since 0px is the same 0% or in any other measure type :) — Daniel, Sep 23 '16 at 10:10
@YusrilMaulidanRaji - _**word-break: break-all** has a_ **[downside](http://stackoverflow.com/a/15137272/6399857)** — Daniel, Sep 23 '16 at 15:46
Pneumonoultramicroscopicvolcanoconiosis? Do the words `Bad Voltage` mean something to you? :) — cat, Sep 23 '16 at 21:23
@Daniel `0px` vs `0%` is rather like ["Is 0 octal or decimal?"](https://stackoverflow.com/questions/26625311/is-0-an-octal-or-a-decimal-in-c): Well, it's... it's 0. — cat, Sep 23 '16 at 21:25

Pugazh · Answer 3 · 2016-09-23T09:22:46.010

2

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>

edited Sep 23 '16 at 09:22

answered Sep 23 '16 at 09:19

Pugazh

9,453
5
33
54

1

while this seems to be an option, there might be a good reason the OP uses absolute positioning, so the least "destructive" option, I think, is [@Weedoze's answer](http://stackoverflow.com/a/39657098/2037924) – benomatis Sep 23 '16 at 09:22
Yup, I have to use the top-left properties for some reasons though. But thanks for the option! – Yusril Maulidan Raji Sep 23 '16 at 10:02

score 2 · Answer 4 · answered Sep 23 '16 at 09:24

2

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

answered Sep 23 '16 at 09:24

Rebecca Joanna

335
1
14

In this case it would be better to use `break-word` – Weedoze Sep 23 '16 at 09:27
yeah but in general case break-all is better – Rebecca Joanna Sep 23 '16 at 09:28

score 0 · Answer 5 · answered Sep 23 '16 at 09:21

0

You should add this rules to your CSS:

#parent {
    overflow: hidden;
}

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

Cheers

answered Sep 23 '16 at 09:21

Roberto Lonardi

569
2
10

Well, it has a different result though. The text instead is being overlapped by the outside border of the parent. The overlapped text should be wrapped to the newline though. – Yusril Maulidan Raji Sep 23 '16 at 09:35

score 0 · Answer 6 · edited Sep 23 '16 at 11:43

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>

How to break a long word inside a div, based on the div's parent width?

6 Answers6