Best IT Recipes

Html (+ css): designation of a preferred place for line break

Let's say I have this text that I want to display in an HTML table cell:

Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks

and I want the line to be interrupted preferably after one of the commas.

Is there a way to show the HTML renderer to try hacking in a specific place and do it first before trying to break one of the spaces without using inextricable spaces? If I use non-breaking spaces, then makes the width more unconditional. I want a line break to occur after one of the spaces if the string wrapping algorithm tried it with commas and couldn't get the string.

I tried to wrap snippets of text in the <span> elements, but that doesn't seem to help anything.

 <html> <head> <style type="text/css"> div.box { width: 180px; } table, table td { border: 1px solid; border-collapse: collapse; } </style> </head> <body> <div class="box"> <table> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <td>lorem ipsum</td> <td> <span>Honey Nut Cheerios,</span> <span>Wheat Chex,</span> <span>Grape-Nuts,</span> <span>Rice Krispies,</span> <span>Some random cereal with a very long name,</span> <span>Honey Bunches of Oats,</span> <span>Wheaties,</span> <span>Special K,</span> <span>Froot Loops,</span> <span>Apple Jacks</span> </td> <td>lorem ipsum</td> </tr> </table> </div> </body> </html>


Note. It looks like CSS3 text-wrap: avoid behavior is what I want, but I can't get it to work.

+97
html css word-wrap
Mar 22 2018-11-22T00:
source share
9 answers

Using

 span.avoidwrap { display:inline-block; }

and wrapping the text that I want to keep together

 <span class="avoidwrap"> Text </span>

it will wrap first in preferred blocks, and then smaller fragments as needed.

+141
Apr 11 2018-12-12T00:
source share

There's a very neat Dan Mall RWD solution that I prefer. I am going to add this here because some other questions regarding flexible line breaks are marked as duplicates of this.
In your case, you will have:

 <span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

And one line of CSS in your media query:

 @media screen and (min-width: 768px) { .rwd-break { display: none; } }
+17
May 12 '15 at 11:13
source share

The simple answer is to use a space character with zero width &#8203; It is used to create gaps within words at specific points.

Is there a complete opposite of the inseparable space &nbsp; (well, actually word-joiner &#8288; ) (word-joiner is the width of the non-breaking space version)

(there are other non-violating codes, such as the inextricable hyphen &#8209; ) (here is an extensive answer to the various "variants" of NBSP)

If you only want to use the HTML version (without CSS / JS), you could use a combination of space with zero width and non-breaking space, however it would be very dirty, and writing a readable version takes a bit of effort.

ctrl + c , ctrl + v helps

Example:

  Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!-- -->Wheat&nbsp;Chex,<!---->&#8203;<!-- -->Grape&#8209;Nuts,<!---->&#8203;<!-- -->Rice&nbsp;Krispies,<!---->&#8203;<!-- -->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!-- -->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!-- -->Wheaties,<!---->&#8203;<!-- -->Special&nbsp;K,<!---->&#8203;<!-- -->Froot&nbsp;Loops,<!---->&#8203;<!-- -->Apple&nbsp;Jacks

unreadable? this is the same HTML without comment tags:

  Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

However, since HTML html rendering is not fully standardized, it is useful for such use, as this solution does not use CSS / JS

Also, if you use this in conjunction with any of the <span> -based solutions, you will get full control over the line break algorithm

(editorial note :)

The only problem I could run into is if you want to dynamically change the points of preferred breaking. This will require constant JS manipulation with each proportional span and the need to process these HTML objects in the text.

+4
Mar 02 '16 at 8:00
source share

The answer is no (you cannot change the line break algorithm used).

But there are some workarounds (the best one is the accepted answer )

You can approach the non-expanding space &nbsp; but only between the words that go together (what you have in between, but not after the decimal point), or you can use white-space:nowrap like @Marcel mentioned.

Both decisions do the same, and both will not break up a group of words if it does not fit on its own.

+3
Mar 22 2018-11-22T00:
source share

With your caption above, use span { white-space:nowrap } . This is as good as you can really expect.

+2
Mar 22 2018-11-22T00:
source share

New answer now we have HTML5:

HTML5 represents the <wbr> . (This means Word Break Opportunity.)

Adding <wbr> means the browser is interrupted there somewhere else, so it’s easy to break words after commas:

 Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks

It supports my all major browsers except IE.

+1
Sep 01 '13 at 14:22
source share

You can simply adjust the margin parameters in CSS (in this case margin-right).

 text { margin-right: 20%; }
-one
Aug 15 '18 at 2:54
source share

Use <div> instead of <span> or specify a class for SPAN and assign the display: block attribute to it.

-3
Mar 22 2018-11-22T00:
source share

This HTML element for this ™ is: (now standardized) <wbr> element .

Eid advise you to use this. It may not work everywhere , but this is the best you can do without going through hoops.

-5
Mar 22 '11 at 15:06
source share


More articles:


All Articles