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

Question

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 lt br   gt 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           ----------------          ----------------

User · Answer

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    lt table gt       lt tr gt           lt td width  1  gt Gargantuan Word lt  td gt       lt  tr gt   lt  table gt    OR using CSS    lt table gt       lt tr gt           lt td style  width 1px  gt Gargantuan Word lt  td gt       lt  tr gt   lt  table gt

User · Answer

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

User · Answer

The best solution is the word-spacing property    Add the  lt p gt  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   lt div gt    lt p gt Sentence Here lt  p gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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  lt span gt  and then CSS set span to display block which would put it on its own line   In theory of course  P

User · Answer

Use   one-word-per-line       word-spacing   lt parent-width gt        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  lt parent-width gt  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

User · Answer

In my case       word-break  break-all    worked perfecly  hope it helps any other newcomer like me

User · Answer

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    x000D   x000D  div   x000D    width  0  x000D    overflow  visible  x000D    x000D   lt div gt Short Word lt  div gt  x000D   lt hr gt  x000D   lt div gt Gargantuan Word lt  div gt  x000D   x000D   x000D    Or you can use one of those newly proposed width values  provided those still exist by the time you read this    x000D   x000D  div   x000D    width  min-intrinsic           old Chrome  Safari    x000D    width  -webkit-min-content     less old Chrome  Safari    x000D    width  -moz-min-content        current Firefox    x000D    width  min-content             current Chrome  Safari  not IE or Edge    x000D    x000D   lt div gt Short Word lt  div gt  x000D   lt hr gt  x000D   lt div gt Gargantuan Word lt  div gt  x000D   x000D   x000D

User · Answer

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     lt div gt Short Word lt  div gt    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    lt div gt      Short     Word  lt  div gt    There s a great article on CSS Tricks explaining the other white-space attributes

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

Examples related to css

Examples related to line-breaks