How do i force a line break in css?

Okay, this is really confusing me. I have some content inside of a div like so:

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

However, the content overflows the DIV (as expected) because the 'word' is too long.

How can I force the browser to 'break' the word where necessary to fit all of the content inside?

Pardeep Jain

80k36 gold badges158 silver badges213 bronze badges

asked Jun 17, 2010 at 4:26

Nathan OsmanNathan Osman

68.8k71 gold badges250 silver badges350 bronze badges

2

Use word-wrap:break-word;

It even works in IE6, which is a pleasant surprise.

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.

TylerH

21.1k59 gold badges74 silver badges93 bronze badges

answered Jun 17, 2010 at 5:36

5

I am not sure about the browser compatibility

word-break: break-all;

Also you can use the tag

(word break) means: "The browser may insert a line break here, if it wishes." It the browser does not think a line break necessary nothing happens.

TylerH

21.1k59 gold badges74 silver badges93 bronze badges

answered Jun 17, 2010 at 4:29

rahulrahul

181k49 gold badges230 silver badges261 bronze badges

6

I was just Googling the same issue, and posted my final solution HERE. It's relevant to this question too.

You can do this easily with a div by giving it the style word-wrap: break-word (and you may need to set its width, too).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

However, for tables, you also need to apply: table-layout: fixed. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). Read more here.

Sample code:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

TylerH

21.1k59 gold badges74 silver badges93 bronze badges

answered Nov 26, 2013 at 1:01

Simon EastSimon East

52.5k17 gold badges135 silver badges130 bronze badges

3

​ is the HTML entity for a unicode character called the zero-width space (ZWSP) which is an invisible character which specifies a line-break opportunity. Similarly the hyphen's purpose is to specify a line-break opportunity within a word boundary.

answered Mar 10, 2015 at 8:25

davidcondreydavidcondrey

32.6k15 gold badges111 silver badges134 bronze badges

2

Found that using the following worked across most major browsers (Chrome, IE, Safari iOS/OSX) except Firefox (v50.0.2) when using flexbox and relying on width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Note: you may need to add browser vendor prefixes if you are not using an autoprefixer.

Another thing to watch out for is text using   for spacing can cause line breaks mid-word.

TylerH

21.1k59 gold badges74 silver badges93 bronze badges

answered Dec 2, 2016 at 1:14

AndrewAndrew

5,3475 gold badges35 silver badges39 bronze badges

1

Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

list

1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline

TylerH

21.1k59 gold badges74 silver badges93 bronze badges

answered Feb 26, 2019 at 8:52

Tính Ngô QuangTính Ngô Quang

4,0461 gold badge30 silver badges32 bronze badges

CSS word-wrap:break-word;, tested in FireFox 3.6.3

answered Jun 17, 2010 at 4:37

BabikerBabiker

17.8k27 gold badges74 silver badges123 bronze badges

0

Remove white-space: nowrap, if there is any.

Implement:

white-space: inherit;
word-break: break-word;

TylerH

21.1k59 gold badges74 silver badges93 bronze badges

answered Apr 24, 2018 at 14:09

1

I solved my problem with code below.

display: table-caption;

answered Jan 4, 2017 at 19:20

0

From MDN:

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.

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

So you can use:

overflow-wrap: break-word;

Can I use?

answered Nov 7, 2017 at 6:53

Shiva127Shiva127

2,1931 gold badge25 silver badges24 bronze badges

First you should identify the width of your element. E.g:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

so that when the text reaches the element width, it will be broken down into lines.

TylerH

21.1k59 gold badges74 silver badges93 bronze badges

answered Feb 20, 2014 at 10:22

As mentioned in @davidcondrey's reply, there is not just the ZWSP, but also the SHY ­ ­ that can be used in very long, constructed words (think German or Dutch) that have to be broken on the spot you want it to be. Invisible, but it gives a hyphen the moment it's needed, thus keeping both word connected and line filled to the utmost.

That way the word luchthavenpolitieagent might be noted as lucht­haven­politie­agent which gives longer parts than the syllables of the word.
Though I never read anything official about it, these soft hyphens manage to get higher priority in browsers than the official hyphens in the single words of the construct (if they have some extension for it at all).
In practice, no browser is capable of breaking such a long, constructed word by itself; on smaller screens resulting in a new line for it, or in some cases even a one-word-line (like when two of those constructed words follow up).

FYI: it's Dutch for airport police officer

answered Nov 4, 2019 at 22:35

word-break: normal seems better to use than word-break: break-word because break-word breaks initials such as EN

word-break: normal

answered Jan 16, 2020 at 11:24

MatoeilMatoeil

6,5829 gold badges51 silver badges74 bronze badges

.word-break {
   word-break: keep-all;
   word-wrap: break-word;
}

answered May 10 at 18:46

You can use a grid system for this.

   
Thisisatest.Thisisatest.Thisisatest.
   
Thisisatest.Thisisatest.Thisisatest.
 

answered Feb 16 at 6:32

ShamsShams

392 bronze badges

Do this:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

#sampleDiv{
   overflow-wrap: break-word;
}

answered Sep 21, 2016 at 13:21

amit bendeamit bende

2563 silver badges4 bronze badges

just try this in our style

white-space: normal;

answered May 7, 2015 at 9:26

2

How do you force a line break?

How do I make text go to next line in CSS?

How do you force a line break in HTML?

What can I use instead of br?

 tag. display: block; It sets the display property of elements to block.