217

I'm building a multilingual site, with the owner helping me with some translations. Some of the displayed phrases need line breaks to maintain the style of the site.

Unfortunately, the owner isn't a computer guy, so if he sees foo<br />bar there's the chance he'll modify the data somehow as he's translating.

Is there a CSS solution (besides changing the width) to apply to an element which would break after every word?

(I know I can do this in PHP, but I'm wondering if there's a nifty trick I don't know about in CSS to accomplish the same thing, perhaps in the CJK features.)

EDIT

I'll attempt to diagram what's happening:

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

The long word breaks automatically, the short word doesn't. I want it to look like this:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------
4
  • 2
    In HTML, elements do break after every word, when the width of a given element requires it. Do you mean within words? Nov 18, 2010 at 8:37
  • 1
    @Paul - No, I need a solution that's not based on fixing the width. The problem is, some phrases are longer and break automatically (like you describe) and some phrases are shorter and don't break, making an inconsistent presentation.
    – Ben
    Nov 18, 2010 at 8:41
  • @Paul - Yes, it's like you describe exactly. Not harming the layout really, but it could look better.
    – Ben
    Nov 18, 2010 at 8:49
  • you could use word-spacing but it would affect all words.. i Think you cant get around wraping those words in span elements.
    – meo
    Nov 18, 2010 at 9:14

14 Answers 14

307

Use

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

where <parent-width> is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).

10
  • Up-vote well deserved! I even started using this with inline-block non-text elements, it works in a same way clear:right works for floating elements. Really useful if you ever need to center align some element but can't use the usual display:block margin: 0 auto; combination.
    – Vexter
    May 10, 2013 at 10:05
  • It fails on compass preprocessor, any way to set a value? Oct 29, 2013 at 10:45
  • 38
    @ToniMichelCaubet The answer is really hard to interpret, but he means: .parent { word-spacing: 100px; } where 100px is the width of the parent element. The problem is that this solution doesn't work if you have a fluid parent. Dec 5, 2013 at 1:51
  • 6
    Just set a very high value for word spacing such as word-spacing: 100000px and you won't have to worry about the parent being fluid in terms of width. Setting a word spacing of 100% would have made sense (it would have been 100% of the parent width), but values expressed in percentage are not supported for that css property.
    – sboisse
    Dec 17, 2014 at 20:12
  • 1
    This was very helpful. I used it in a responsive situation, where at one width I want text in tabs to wrap so they're all the same height: word-spacing: 2em; and at a mobile width I want them to be single-line: word-spacing: unset;
    – Will
    Mar 12, 2015 at 15:59
192

The answer given by @HursVanBloob works only with fixed width parent container, but fails in case of fluid-width containers.

I tried a lot of properties, but nothing worked as expected. Finally I came to a conclusion that giving word-spacing a very huge value works perfectly fine.

p { word-spacing: 9999999px; }

or, for the modern browsers you can use the CSS vw unit (visual width in % of the screen size).

p { word-spacing: 100vw; }
7
  • thats what I will try to!
    – vaskort
    Nov 7, 2014 at 9:04
  • Completely breaks with &nbsp; though. Aug 22, 2016 at 10:41
  • 2
    Well it doesn't work for me that makes the fluid width of the container to go very very high.
    – Onza
    Apr 5, 2017 at 9:24
  • @Onza can you share a fiddle link, showing your issue? Apr 5, 2017 at 10:24
  • 1
    @Onza it doesn't work that way. You need to define a width to your parent wrapper or your content wrapper. The text-fix is working hence bringing your next word on new-line but also using available space because of text-indent: long value;. You'll have to define a width-limit to it. It's difficult to find real-world use of your scenario. If you have width then why to break text. Apr 5, 2017 at 12:19
51

Try using white-space: pre-line;. It creates a line-break wherever a line-break appears in the code, but ignores the extra whitespace (tabs and spaces etc.).

First, write your words on separate lines in your code:

<div>Short
Word</div>

Then apply the style to the element containing the words.

div { white-space: pre-line; }

Be careful though, every line break in the code inside the element will create a line break. So writing the following will result in an extra line break before the first word and after the last word:

<div>
    Short
    Word
</div>

There's a great article on CSS Tricks explaining the other white-space attributes.

6
  • You should explain how white-space can be used to answer the question. Sorry, but I don't see how.
    – jlgrall
    Jan 20, 2013 at 22:14
  • 2
    Well the article on CSS Tricks explains it fully, so I thought a link would be enough, rather than trying to regurgitate the answer here.
    – Nass
    Jan 24, 2013 at 10:42
  • Ok, so you suggest to put real line breaks in the source, and to use the CSS "white-space: pre;" to display those line breaks like a <pre> tag would do ? That could work, and a line break should look more natural to translators than a <br />. I will try to edit your answer to add it :)
    – jlgrall
    Jan 24, 2013 at 20:03
  • Exactly. Well actually, white-space: pre-line; would probably be more appropriate, since it ignores extra whitespace in your code. I'll update the answer.
    – Nass
    Feb 1, 2013 at 13:20
  • Good, maybe just add white-space: pre; for IE 7.
    – jlgrall
    Feb 6, 2013 at 21:46
45

An alternative solution is described on Separate sentence to one word per line, by applying display:table-caption; to the element

4
  • This actually only groups words based on the width of the longest word. Mar 1, 2016 at 1:08
  • 1
    Although this can group words on a line it works really well in a lot of situations and doesn't feel as hacky as the massive word spacing option.
    – Dale
    Apr 8, 2016 at 9:00
  • 1
    This is the one that worked perfectly for me, nice one! Aug 22, 2016 at 10:46
  • 1
    It doesn't give any result
    – jafarbtech
    Jul 31, 2017 at 11:40
28

If you want to be able to choose from different solutions, in addition to the given answers...

An alternative method is to give the container a width of 0 and to make sure overflow is visible. Then each word will overflow out of it and will be on its own line.

div {
  width: 0;
  overflow: visible;
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Or you can use one of those newly proposed width values, provided those still exist by the time you read this.

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

2
  • 1
    Best solution honestly
    – SenTisso
    Jul 27, 2021 at 10:07
  • 1
    width & overlow - great answer
    – Dr Madvibe
    Mar 31, 2022 at 10:05
21

<span> is an inline element and I'm adding an display: inline-block to give a width to the element max-width: min-content;, min-content is the value/width of the smallest word in your text/sentance.

If you use min-content, the "width" will be your longest word. In this case Example is your longer word. But if you have different words like and if or few 2/3 char words then this words will fit on the same line.

If you want to keep the on word behavior you can give a fixed width, for example 5px.

Check more examples in CodePen.

.wrapWord {
  display: inline-block;
  max-width: min-content;
}
<div>
  <span class="wrapWord">
   Example Word
  </span>
</div>

2
  • 4
    This is the solution that worked for me. Self-contained, works cleanly with flexbox.
    – nedsalk
    Jan 14, 2022 at 7:54
  • This is a nice solution for what I'm trying to do, which is to make the element as narrow as the longest word will allow without necessarily wrapping after each word. For example, "A charm of hummingbirds" wraps to two lines because "A charm of" fits within the space needed by "hummingbirds".
    – ray
    Dec 18, 2023 at 19:58
7

The best solution is the word-spacing property.

Add the <p> in a container with a specific size (example 300px) and after you have to add that size as the value in the word-spacing.

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

In this way, your sentence will be always broken and set in a column, but the with of the paragraph will be dynamic.

Here an example Codepen

5

You can't target each word in CSS. However, with a bit of jQuery you probably could.

With jQuery you can wrap each word in a <span> and then CSS set span to display:block which would put it on its own line.

In theory of course :P

5
  • Yep, I was afraid of that. Could do it in PHP too but it seems like an ugly solution. I was thinking there might be some :first-child trick or something out there...
    – Ben
    Nov 18, 2010 at 8:47
  • @Steve: no, CSS selectors currently only allow you to select HTML elements, not text nodes. I had a look at the CSS 3 Text module, but there doesn’t seem to be anything there that forces a break after each word in an element. Mark’s solution is your best bet. Nov 18, 2010 at 8:51
  • @Paul, @Mark - If one of you guys wants the rep, you could make that an answer and I'll accept it. I'm going to mark this as unanswerable (for now) per meta.stackoverflow.com/questions/48013/….
    – Ben
    Nov 18, 2010 at 8:55
  • 1
    I think Mark already has made it an answer, all the rep is his as far as I’m concerned. Nov 18, 2010 at 9:02
  • @Paul - +1 team player give the guy a badge or something :)
    – Ben
    Nov 19, 2010 at 0:11
2

https://jsfiddle.net/bm3Lfcod/1/

For those seeking for a solution that works within a flexible parent container with a children that is flexible in both dimensions. eg. navbar buttons.

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}
2
  • Try giving that span any other CSS property you can give. Say a property which could cause browser reflow Apr 6, 2017 at 8:28
  • 1
    browser reflow?
    – Onza
    Apr 8, 2017 at 21:08
2

I faced the same problem, and none of the options here helped me. Some mail services do not support specified styles. Here is my version, which solved the problem and works everywhere I checked:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

OR using CSS:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>
2

I did this on a project where the client wanted the 3 word title on a different line. Basically your increase the spaces with CSS the use the white-space to separate the lines.

    word-spacing:9999px;
    white-space: pre-line;

0

If you can add markup (e.g. a span) around each word then you can use CSS to insert a line break after each.

Note that the "content" we are inserting is \a which is hex for decimal 10 which is the newline character.

.break-after-each-word > .word::after {
  content: "\a";
  white-space: pre;
}
<div class="break-after-each-word">
  <span class="word">Foo</span>
  <span class="word">Bar</span>
  <span class="word">Baz</span>
</div>

0

TL;DR: Split the words and join them with a <br> tag.

Note 1: This is a non-CSS alternative solution.

Note 2: This is specific to my own specific problem and it works fine and I'm okay with the cons; i.e. more compute power needed, the addition of JavaScript and adding extra
tags between each word. Again, this works fine in my React.js project and I thought I'd share it in case someone finds it useful.

// @ts-nocheck
const HeadingCell = ({cell}) => {
  const splitHeading = (heading) => {
    const words = heading.split(' ')
    const joinedWords = words.join('<br>')
    return joinedWords
  }

  return <span dangerouslySetInnerHTML={{__html: splitHeading(cell.data.heading)}}></span>
}

export default HeadingCell
-4

In my case,

    word-break: break-all;

worked perfecly, hope it helps any other newcomer like me.

1
  • 3
    A -1 from me because this is an incorrect answer. This breaks the line at every character IF needed.
    – Emobe
    Feb 23, 2020 at 15:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.