Can CSS force a line break after each word in an element?

130

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

----------------          ----------------

edited Nov 18 '10 at 8:54

Paul D. Waite

64.1k46168252

asked Nov 18 '10 at 8:32

Ben

27.4k35133190

2

In HTML, elements do break after every word, when the width of a given element requires it. Do you mean within words?

– Paul D. Waite
Nov 18 '10 at 8:37

@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 '10 at 8:41

@Paul - Yes, it's like you describe exactly. Not harming the layout really, but it could look better.

– Ben
Nov 18 '10 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 '10 at 9:14

@meo - Looks like that, thanks for the thought

– Ben
Nov 19 '10 at 0:12

add a comment |

130

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

----------------          ----------------

edited Nov 18 '10 at 8:54

Paul D. Waite

64.1k46168252

asked Nov 18 '10 at 8:32

Ben

27.4k35133190

2

In HTML, elements do break after every word, when the width of a given element requires it. Do you mean within words?

– Paul D. Waite
Nov 18 '10 at 8:37

@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 '10 at 8:41

@Paul - Yes, it's like you describe exactly. Not harming the layout really, but it could look better.

– Ben
Nov 18 '10 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 '10 at 9:14

@meo - Looks like that, thanks for the thought

– Ben
Nov 19 '10 at 0:12

add a comment |

130

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

----------------          ----------------

edited Nov 18 '10 at 8:54

Paul D. Waite

64.1k46168252

asked Nov 18 '10 at 8:32

Ben

27.4k35133190

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

----------------          ----------------

css line-breaks

edited Nov 18 '10 at 8:54

Paul D. Waite

64.1k46168252

asked Nov 18 '10 at 8:32

Ben

27.4k35133190

edited Nov 18 '10 at 8:54

Paul D. Waite

64.1k46168252

asked Nov 18 '10 at 8:32

Ben

27.4k35133190

edited Nov 18 '10 at 8:54

Paul D. Waite

64.1k46168252

edited Nov 18 '10 at 8:54

Paul D. Waite

64.1k46168252

edited Nov 18 '10 at 8:54

Paul D. Waite

64.1k46168252

asked Nov 18 '10 at 8:32

Ben

27.4k35133190

asked Nov 18 '10 at 8:32

Ben

27.4k35133190

asked Nov 18 '10 at 8:32

Ben

27.4k35133190

2

In HTML, elements do break after every word, when the width of a given element requires it. Do you mean within words?

– Paul D. Waite
Nov 18 '10 at 8:37

@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 '10 at 8:41

@Paul - Yes, it's like you describe exactly. Not harming the layout really, but it could look better.

– Ben
Nov 18 '10 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 '10 at 9:14

@meo - Looks like that, thanks for the thought

– Ben
Nov 19 '10 at 0:12

add a comment |

2

In HTML, elements do break after every word, when the width of a given element requires it. Do you mean within words?

– Paul D. Waite
Nov 18 '10 at 8:37

@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 '10 at 8:41

@Paul - Yes, it's like you describe exactly. Not harming the layout really, but it could look better.

– Ben
Nov 18 '10 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 '10 at 9:14

@meo - Looks like that, thanks for the thought

– Ben
Nov 19 '10 at 0:12

In HTML, elements do break after every word, when the width of a given element requires it. Do you mean within words?

– Paul D. Waite
Nov 18 '10 at 8:37

@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 '10 at 8:41

@Paul - Yes, it's like you describe exactly. Not harming the layout really, but it could look better.

– Ben
Nov 18 '10 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 '10 at 9:14

@meo - Looks like that, thanks for the thought

– Ben
Nov 19 '10 at 0:12

add a comment |

8 Answers
8

active

oldest

votes

235

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

edited Sep 12 '18 at 9:08

Maulik Padamani

answered May 31 '12 at 9:50

Hurs van Bloob

2,382192

this is actually a working answer to the OP’s question!

– maddrag0n
Sep 6 '12 at 12:27

24

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

– John Kurlak
Dec 5 '13 at 1:51

4

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 '14 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 '15 at 15:59

1

This is amazing. From years in the future, thanks a bunch :)

– Lucas Medina
Jun 23 '17 at 17:52

|
show 9 more comments

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

edited Jul 18 '17 at 10:45

user7611618

answered May 27 '14 at 12:15

Deepak Yadav

4,72341942

thats what I will try to!

– vaskort
Nov 7 '14 at 9:04

This is a great solution!

– Joe Conlin
Apr 3 '15 at 19:32

1

Quick, dirty, easy; this gets the job done.

– Muhammad Abdul-Rahim
Oct 20 '15 at 20:26

2

Well it doesn't work for me that makes the fluid width of the container to go very very high.

– Onza
Apr 5 '17 at 9:24

1

@DeepakYadav jsfiddle.net/bm3Lfcod

– Onza
Apr 5 '17 at 11:16

|
show 7 more comments

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.

edited Feb 1 '13 at 13:31

answered Nov 2 '12 at 21:37

Nass

436611

You should explain how white-space can be used to answer the question. Sorry, but I don't see how.

– jlgrall
Jan 20 '13 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 '13 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  . I will try to edit your answer to add it :)

– jlgrall
Jan 24 '13 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 '13 at 13:20

Good, maybe just add white-space: pre; for IE 7.

– jlgrall
Feb 6 '13 at 21:46

|
show 1 more comment

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

edited May 23 '17 at 11:55

Community♦

answered Jan 8 '15 at 18:20

malcomio

51648

This actually only groups words based on the width of the longest word.

– James South
Mar 1 '16 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 '16 at 9:00

This is the one that worked perfectly for me, nice one!

– Matt Fletcher
Aug 22 '16 at 10:46

1

It doesn't give any result

– jafarbtech
Jul 31 '17 at 11:40

add a comment |

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  and then CSS set span to display:block which would put it on its own line.

In theory of course :P

edited Apr 10 '13 at 10:01

Matt

1181832

answered Nov 18 '10 at 8:43

Mark

222515

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

– Paul D. Waite
Nov 18 '10 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 '10 at 8:55

I think Mark already has made it an answer, all the rep is his as far as I’m concerned.

– Paul D. Waite
Nov 18 '10 at 9:02

4

sees the word "jQuery"... immediately stops reading

– Craig Wayne
Apr 16 '14 at 20:46

|
show 2 more comments

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>

answered Jan 21 '18 at 19:59

Mr Lister

34.7k1074117

add a comment |

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;

}

answered Apr 5 '17 at 11:24

Onza

6171926

Try giving that span any other CSS property you can give. Say a property which could cause browser reflow

– Deepak Yadav
Apr 6 '17 at 8:28

1

browser reflow?

– Onza
Apr 8 '17 at 21:08

add a comment |

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>

edited Jan 9 at 18:31

Circle B

94611531

answered Jan 9 at 17:35

eep

213

add a comment |

protected by Josh Crozier Dec 22 '15 at 14:20

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

8 Answers
8

active

oldest

votes

8 Answers
8

active

oldest

votes

235

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;

 }

edited Sep 12 '18 at 9:08

Maulik Padamani

answered May 31 '12 at 9:50

Hurs van Bloob

2,382192

this is actually a working answer to the OP’s question!

– maddrag0n
Sep 6 '12 at 12:27

24

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

– John Kurlak
Dec 5 '13 at 1:51

4

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 '14 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 '15 at 15:59

1

This is amazing. From years in the future, thanks a bunch :)

– Lucas Medina
Jun 23 '17 at 17:52

|
show 9 more comments

235

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;

 }

edited Sep 12 '18 at 9:08

Maulik Padamani

answered May 31 '12 at 9:50

Hurs van Bloob

2,382192

this is actually a working answer to the OP’s question!

– maddrag0n
Sep 6 '12 at 12:27

24

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

– John Kurlak
Dec 5 '13 at 1:51

4

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 '14 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 '15 at 15:59

1

This is amazing. From years in the future, thanks a bunch :)

– Lucas Medina
Jun 23 '17 at 17:52

|
show 9 more comments

235

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;

 }

edited Sep 12 '18 at 9:08

Maulik Padamani

answered May 31 '12 at 9:50

Hurs van Bloob

2,382192

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;

 }

edited Sep 12 '18 at 9:08

Maulik Padamani

answered May 31 '12 at 9:50

Hurs van Bloob

2,382192

edited Sep 12 '18 at 9:08

Maulik Padamani

edited Sep 12 '18 at 9:08

Maulik Padamani

edited Sep 12 '18 at 9:08

Maulik Padamani

answered May 31 '12 at 9:50

Hurs van Bloob

2,382192

answered May 31 '12 at 9:50

Hurs van Bloob

2,382192

answered May 31 '12 at 9:50

Hurs van Bloob

2,382192

this is actually a working answer to the OP’s question!

– maddrag0n
Sep 6 '12 at 12:27

24

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

– John Kurlak
Dec 5 '13 at 1:51

4

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 '14 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 '15 at 15:59

1

This is amazing. From years in the future, thanks a bunch :)

– Lucas Medina
Jun 23 '17 at 17:52

|
show 9 more comments

this is actually a working answer to the OP’s question!

– maddrag0n
Sep 6 '12 at 12:27

24

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

– John Kurlak
Dec 5 '13 at 1:51

4

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 '14 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 '15 at 15:59

1

This is amazing. From years in the future, thanks a bunch :)

– Lucas Medina
Jun 23 '17 at 17:52

this is actually a working answer to the OP’s question!

– maddrag0n
Sep 6 '12 at 12:27

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

– John Kurlak
Dec 5 '13 at 1:51

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 '14 at 20:12

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 '15 at 15:59

This is amazing. From years in the future, thanks a bunch :)

– Lucas Medina
Jun 23 '17 at 17:52

|
show 9 more comments

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

edited Jul 18 '17 at 10:45

user7611618

answered May 27 '14 at 12:15

Deepak Yadav

4,72341942

thats what I will try to!

– vaskort
Nov 7 '14 at 9:04

This is a great solution!

– Joe Conlin
Apr 3 '15 at 19:32

1

Quick, dirty, easy; this gets the job done.

– Muhammad Abdul-Rahim
Oct 20 '15 at 20:26

2

Well it doesn't work for me that makes the fluid width of the container to go very very high.

– Onza
Apr 5 '17 at 9:24

1

@DeepakYadav jsfiddle.net/bm3Lfcod

– Onza
Apr 5 '17 at 11:16

|
show 7 more comments

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

edited Jul 18 '17 at 10:45

user7611618

answered May 27 '14 at 12:15

Deepak Yadav

4,72341942

thats what I will try to!

– vaskort
Nov 7 '14 at 9:04

This is a great solution!

– Joe Conlin
Apr 3 '15 at 19:32

1

Quick, dirty, easy; this gets the job done.

– Muhammad Abdul-Rahim
Oct 20 '15 at 20:26

2

Well it doesn't work for me that makes the fluid width of the container to go very very high.

– Onza
Apr 5 '17 at 9:24

1

@DeepakYadav jsfiddle.net/bm3Lfcod

– Onza
Apr 5 '17 at 11:16

|
show 7 more comments

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

edited Jul 18 '17 at 10:45

user7611618

answered May 27 '14 at 12:15

Deepak Yadav

4,72341942

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

edited Jul 18 '17 at 10:45

user7611618

answered May 27 '14 at 12:15

Deepak Yadav

4,72341942

edited Jul 18 '17 at 10:45

user7611618

edited Jul 18 '17 at 10:45

user7611618

edited Jul 18 '17 at 10:45

user7611618

answered May 27 '14 at 12:15

Deepak Yadav

4,72341942

answered May 27 '14 at 12:15

Deepak Yadav

4,72341942

answered May 27 '14 at 12:15

Deepak Yadav

4,72341942

thats what I will try to!

– vaskort
Nov 7 '14 at 9:04

This is a great solution!

– Joe Conlin
Apr 3 '15 at 19:32

1

Quick, dirty, easy; this gets the job done.

– Muhammad Abdul-Rahim
Oct 20 '15 at 20:26

2

Well it doesn't work for me that makes the fluid width of the container to go very very high.

– Onza
Apr 5 '17 at 9:24

1

@DeepakYadav jsfiddle.net/bm3Lfcod

– Onza
Apr 5 '17 at 11:16

|
show 7 more comments

thats what I will try to!

– vaskort
Nov 7 '14 at 9:04

This is a great solution!

– Joe Conlin
Apr 3 '15 at 19:32

1

Quick, dirty, easy; this gets the job done.

– Muhammad Abdul-Rahim
Oct 20 '15 at 20:26

2

Well it doesn't work for me that makes the fluid width of the container to go very very high.

– Onza
Apr 5 '17 at 9:24

1

@DeepakYadav jsfiddle.net/bm3Lfcod

– Onza
Apr 5 '17 at 11:16

thats what I will try to!

– vaskort
Nov 7 '14 at 9:04

This is a great solution!

– Joe Conlin
Apr 3 '15 at 19:32

Quick, dirty, easy; this gets the job done.

– Muhammad Abdul-Rahim
Oct 20 '15 at 20:26

Well it doesn't work for me that makes the fluid width of the container to go very very high.

– Onza
Apr 5 '17 at 9:24

@DeepakYadav jsfiddle.net/bm3Lfcod

– Onza
Apr 5 '17 at 11:16

|
show 7 more comments

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

<div>

    Short

    Word

</div>

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

edited Feb 1 '13 at 13:31

answered Nov 2 '12 at 21:37

Nass

436611

You should explain how white-space can be used to answer the question. Sorry, but I don't see how.

– jlgrall
Jan 20 '13 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 '13 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  . I will try to edit your answer to add it :)

– jlgrall
Jan 24 '13 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 '13 at 13:20

Good, maybe just add white-space: pre; for IE 7.

– jlgrall
Feb 6 '13 at 21:46

|
show 1 more comment

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

<div>

    Short

    Word

</div>

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

edited Feb 1 '13 at 13:31

answered Nov 2 '12 at 21:37

Nass

436611

You should explain how white-space can be used to answer the question. Sorry, but I don't see how.

– jlgrall
Jan 20 '13 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 '13 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  . I will try to edit your answer to add it :)

– jlgrall
Jan 24 '13 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 '13 at 13:20

Good, maybe just add white-space: pre; for IE 7.

– jlgrall
Feb 6 '13 at 21:46

|
show 1 more comment

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

<div>

    Short

    Word

</div>

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

edited Feb 1 '13 at 13:31

answered Nov 2 '12 at 21:37

Nass

436611

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

<div>

    Short

    Word

</div>

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

edited Feb 1 '13 at 13:31

answered Nov 2 '12 at 21:37

Nass

436611

edited Feb 1 '13 at 13:31

answered Nov 2 '12 at 21:37

Nass

436611

answered Nov 2 '12 at 21:37

Nass

436611

answered Nov 2 '12 at 21:37

Nass

436611

You should explain how white-space can be used to answer the question. Sorry, but I don't see how.

– jlgrall
Jan 20 '13 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 '13 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  . I will try to edit your answer to add it :)

– jlgrall
Jan 24 '13 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 '13 at 13:20

Good, maybe just add white-space: pre; for IE 7.

– jlgrall
Feb 6 '13 at 21:46

|
show 1 more comment

You should explain how white-space can be used to answer the question. Sorry, but I don't see how.

– jlgrall
Jan 20 '13 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 '13 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  . I will try to edit your answer to add it :)

– jlgrall
Jan 24 '13 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 '13 at 13:20

Good, maybe just add white-space: pre; for IE 7.

– jlgrall
Feb 6 '13 at 21:46

You should explain how white-space can be used to answer the question. Sorry, but I don't see how.

– jlgrall
Jan 20 '13 at 22:14

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 '13 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  . I will try to edit your answer to add it :)

– jlgrall
Jan 24 '13 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 '13 at 13:20

Good, maybe just add white-space: pre; for IE 7.

– jlgrall
Feb 6 '13 at 21:46

|
show 1 more comment

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

edited May 23 '17 at 11:55

Community♦

answered Jan 8 '15 at 18:20

malcomio

51648

This actually only groups words based on the width of the longest word.

– James South
Mar 1 '16 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 '16 at 9:00

This is the one that worked perfectly for me, nice one!

– Matt Fletcher
Aug 22 '16 at 10:46

1

It doesn't give any result

– jafarbtech
Jul 31 '17 at 11:40

add a comment |

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

edited May 23 '17 at 11:55

Community♦

answered Jan 8 '15 at 18:20

malcomio

51648

This actually only groups words based on the width of the longest word.

– James South
Mar 1 '16 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 '16 at 9:00

This is the one that worked perfectly for me, nice one!

– Matt Fletcher
Aug 22 '16 at 10:46

1

It doesn't give any result

– jafarbtech
Jul 31 '17 at 11:40

add a comment |

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

edited May 23 '17 at 11:55

Community♦

answered Jan 8 '15 at 18:20

malcomio

51648

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

edited May 23 '17 at 11:55

Community♦

answered Jan 8 '15 at 18:20

malcomio

51648

edited May 23 '17 at 11:55

Community♦

edited May 23 '17 at 11:55

Community♦

edited May 23 '17 at 11:55

Community♦

answered Jan 8 '15 at 18:20

malcomio

51648

answered Jan 8 '15 at 18:20

malcomio

51648

answered Jan 8 '15 at 18:20

malcomio

51648

This actually only groups words based on the width of the longest word.

– James South
Mar 1 '16 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 '16 at 9:00

This is the one that worked perfectly for me, nice one!

– Matt Fletcher
Aug 22 '16 at 10:46

1

It doesn't give any result

– jafarbtech
Jul 31 '17 at 11:40

add a comment |

This actually only groups words based on the width of the longest word.

– James South
Mar 1 '16 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 '16 at 9:00

This is the one that worked perfectly for me, nice one!

– Matt Fletcher
Aug 22 '16 at 10:46

1

It doesn't give any result

– jafarbtech
Jul 31 '17 at 11:40

This actually only groups words based on the width of the longest word.

– James South
Mar 1 '16 at 1:08

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 '16 at 9:00

This is the one that worked perfectly for me, nice one!

– Matt Fletcher
Aug 22 '16 at 10:46

It doesn't give any result

– jafarbtech
Jul 31 '17 at 11:40

add a comment |

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  and then CSS set span to display:block which would put it on its own line.

In theory of course :P

edited Apr 10 '13 at 10:01

Matt

1181832

answered Nov 18 '10 at 8:43

Mark

222515

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

– Paul D. Waite
Nov 18 '10 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 '10 at 8:55

I think Mark already has made it an answer, all the rep is his as far as I’m concerned.

– Paul D. Waite
Nov 18 '10 at 9:02

4

sees the word "jQuery"... immediately stops reading

– Craig Wayne
Apr 16 '14 at 20:46

|
show 2 more comments

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  and then CSS set span to display:block which would put it on its own line.

In theory of course :P

edited Apr 10 '13 at 10:01

Matt

1181832

answered Nov 18 '10 at 8:43

Mark

222515

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

– Paul D. Waite
Nov 18 '10 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 '10 at 8:55

I think Mark already has made it an answer, all the rep is his as far as I’m concerned.

– Paul D. Waite
Nov 18 '10 at 9:02

4

sees the word "jQuery"... immediately stops reading

– Craig Wayne
Apr 16 '14 at 20:46

|
show 2 more comments

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  and then CSS set span to display:block which would put it on its own line.

In theory of course :P

edited Apr 10 '13 at 10:01

Matt

1181832

answered Nov 18 '10 at 8:43

Mark

222515

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  and then CSS set span to display:block which would put it on its own line.

In theory of course :P

edited Apr 10 '13 at 10:01

Matt

1181832

answered Nov 18 '10 at 8:43

Mark

222515

edited Apr 10 '13 at 10:01

Matt

1181832

edited Apr 10 '13 at 10:01

Matt

1181832

edited Apr 10 '13 at 10:01

Matt

1181832

answered Nov 18 '10 at 8:43

Mark

222515

answered Nov 18 '10 at 8:43

Mark

222515

answered Nov 18 '10 at 8:43

Mark

222515

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

– Paul D. Waite
Nov 18 '10 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 '10 at 8:55

I think Mark already has made it an answer, all the rep is his as far as I’m concerned.

– Paul D. Waite
Nov 18 '10 at 9:02

4

sees the word "jQuery"... immediately stops reading

– Craig Wayne
Apr 16 '14 at 20:46

|
show 2 more comments

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

– Paul D. Waite
Nov 18 '10 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 '10 at 8:55

I think Mark already has made it an answer, all the rep is his as far as I’m concerned.

– Paul D. Waite
Nov 18 '10 at 9:02

4

sees the word "jQuery"... immediately stops reading

– Craig Wayne
Apr 16 '14 at 20:46

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

– Paul D. Waite
Nov 18 '10 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 '10 at 8:55

I think Mark already has made it an answer, all the rep is his as far as I’m concerned.

– Paul D. Waite
Nov 18 '10 at 9:02

sees the word "jQuery"... immediately stops reading

– Craig Wayne
Apr 16 '14 at 20:46

|
show 2 more comments

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>

answered Jan 21 '18 at 19:59

Mr Lister

34.7k1074117

add a comment |

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>

answered Jan 21 '18 at 19:59

Mr Lister

34.7k1074117

add a comment |

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>

answered Jan 21 '18 at 19:59

Mr Lister

34.7k1074117

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>

div {

  width: 0;

  overflow: visible;

}

<div>Short Word</div>

<hr>

<div>Gargantuan Word</div>

div {

  width: 0;

  overflow: visible;

}

<div>Short Word</div>

<hr>

<div>Gargantuan Word</div>

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>

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>

answered Jan 21 '18 at 19:59

Mr Lister

34.7k1074117

answered Jan 21 '18 at 19:59

Mr Lister

34.7k1074117

answered Jan 21 '18 at 19:59

Mr Lister

34.7k1074117

answered Jan 21 '18 at 19:59

Mr Lister

34.7k1074117

add a comment |

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;

}

answered Apr 5 '17 at 11:24

Onza

6171926

Try giving that span any other CSS property you can give. Say a property which could cause browser reflow

– Deepak Yadav
Apr 6 '17 at 8:28

1

browser reflow?

– Onza
Apr 8 '17 at 21:08

add a comment |

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;

}

answered Apr 5 '17 at 11:24

Onza

6171926

Try giving that span any other CSS property you can give. Say a property which could cause browser reflow

– Deepak Yadav
Apr 6 '17 at 8:28

1

browser reflow?

– Onza
Apr 8 '17 at 21:08

add a comment |

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;

}

answered Apr 5 '17 at 11:24

Onza

6171926

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;

}

answered Apr 5 '17 at 11:24

Onza

6171926

answered Apr 5 '17 at 11:24

Onza

6171926

answered Apr 5 '17 at 11:24

Onza

6171926

answered Apr 5 '17 at 11:24

Onza

6171926

Try giving that span any other CSS property you can give. Say a property which could cause browser reflow

– Deepak Yadav
Apr 6 '17 at 8:28

1

browser reflow?

– Onza
Apr 8 '17 at 21:08

add a comment |

Try giving that span any other CSS property you can give. Say a property which could cause browser reflow

– Deepak Yadav
Apr 6 '17 at 8:28

1

browser reflow?

– Onza
Apr 8 '17 at 21:08

Try giving that span any other CSS property you can give. Say a property which could cause browser reflow

– Deepak Yadav
Apr 6 '17 at 8:28

browser reflow?

– Onza
Apr 8 '17 at 21:08

add a comment |

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>

edited Jan 9 at 18:31

Circle B

94611531

answered Jan 9 at 17:35

eep

213

add a comment |

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>

edited Jan 9 at 18:31

Circle B

94611531

answered Jan 9 at 17:35

eep

213

add a comment |

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>

edited Jan 9 at 18:31

Circle B

94611531

answered Jan 9 at 17:35

eep

213

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>

edited Jan 9 at 18:31

Circle B

94611531

answered Jan 9 at 17:35

eep

213

edited Jan 9 at 18:31

Circle B

94611531

edited Jan 9 at 18:31

Circle B

94611531

edited Jan 9 at 18:31

Circle B

94611531

answered Jan 9 at 17:35

eep

213

answered Jan 9 at 17:35

eep

213

answered Jan 9 at 17:35

eep

213

add a comment |

protected by Josh Crozier Dec 22 '15 at 14:20

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu