breaking/ wrapping a long word using css

Question

I have a div which is the width of the page. I want a very long word in this div to break and wrap, so all the content is displayed on the screen and doesn't overflow/ width is never greater than 100%.

I've tried overflow-wrap: break-word; but this doesn't seem to do the trick.

Thanks.

.container { max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }

h1 { text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
overflow-wrap: break-word;}

<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

You might want to take a look at [this answer](https://stackoverflow.com/a/15137272/5872029) as that has 2 different CSS-only solutions. — Tijmen, May 31 '18 at 20:54
your container's width is never set, so it's not going to break the words. — Liora Haydont, May 31 '18 at 20:57

Peter Riess · Answer 1 · 2018-05-31T21:19:38.350

1

You have to add the hyphens to auto if you want to do it by the browser.

if you want to do it manually
see my update:

.container { 

max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; 
border: 1px solid grey;

}

h1 { word-wrap: break-word;
 /*you can split the words by the width of h1*/
  width:250px;
}

<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

edited May 31 '18 at 21:19

answered May 31 '18 at 20:53

Peter Riess

9
2

your snippet doesn't event work? – Liora Haydont May 31 '18 at 20:54
1

works perfectly - i'll put it to jsfiddle https://jsfiddle.net/65g6ngpa/1/ – Peter Riess May 31 '18 at 20:57
if you just want to "wrap" h1 -> you should put the hyphens: auto to you h1 css – Peter Riess May 31 '18 at 20:59
even in the fiddle it doesn't do what op asks... – Liora Haydont May 31 '18 at 21:00

Coral Kashri · Answer 2 · 2018-05-31T21:07:04.400

Credit https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

JSFiddle

.css

.container { max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }

h1 { text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
overflow-wrap: break-word;}

.breakword {

        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;

        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;

        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;

    }

.html

<div class="container breakword">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

score 1 · Answer 3 · answered May 31 '18 at 20:56

you're looking for the word-break property.

additionally, if you want to control where the word's break in html, look up the <wbr> tag.

.container { max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }

h1 { text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
word-break:break-all;}

<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

score 1 · Answer 4 · answered May 31 '18 at 20:57

You can add word-break: break-all; but it will push the content to the left?

.container {
  max-width: 100%;
  margin: 0 20px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  float: none;
}

h1 {
  text-align: center;
  font-weight: 800;
  padding: 0px 20px;
  color: #bec0ca;
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: -.5rem;
  font-weight: 800;
  padding: 0px 40px;
  max-width: 100%;
  overflow-wrap: break-word;
   word-break: break-all;  
}

<div class="container">
  <h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

score 1 · Answer 5 · answered May 31 '18 at 20:59

1

  .container {
  width: 300px;
  background-color: red;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

This should achieve the effect that you're looking for :)

answered May 31 '18 at 20:59

Oliver K

55
1
11

score 0 · Answer 6 · answered May 31 '18 at 21:02

0

According to the Mozilla developer reference:

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

Use overflow-wrap and set the value of the property to "break-word"

answered May 31 '18 at 21:02

commandertuna

104
1
13

why posting two answers? keep only one with the needed details – Temani Afif May 31 '18 at 21:14
I was gonna post it in my last one's comments but it's a *different answer.* A-duh...... fine ill remove it – commandertuna May 31 '18 at 21:15

breaking/ wrapping a long word using css

6 Answers6