CODEWITHSUNDEEP
htmlcssword-wrap
Jason S
Jason S

Reputation: 189786

Denoting a preferred place for a 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 break preferentially after one of the commas.

Is there a way to tell the HTML renderer to try breaking at some designated spot, and do that first before trying to break after one of the spaces, without using non-breaking spaces? If I use non-breaking spaces then it makes the width larger unconditionally. I want the line break to happen after one of the spaces, if the line-wrapping algorithm has tried it with the commas first and can't get the line to fit.

I tried wrapping text fragments in <span> elements but that doesn't seem to do anything helpful.

<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 the CSS3 text-wrap: avoid behavior is what I want, but I can't seem to get it to work.

Upvotes: 147

Views: 45681

Answers (9)

Ian Boyd
Ian Boyd

Reputation: 256901

The thing that you're supposed to do (use Unicode for what it was intended) provides the best results:

enter image description here

<table border="1">
  <thead>
    <tr><th>Method</th><th>Results</th></tr>
  </thead>
  <tbody>
    <tr><td>&lt;wbr></td><td>Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape&#8209;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</td></tr>
    <tr><td>U+200B Zero width Space</td><td>Honey Nut Cheerios,&#8203;Wheat Chex, &#x200b;Grape&#8209;Nuts, &#x200b;Rice Krispies, &#x200b;Some random cereal with a very long name, &#x200b;Honey Bunches of Oats, &#x200b;Wheaties, &#x200b;Special K, &#x200b;Froot Loops, &#x200b;Apple Jacks</td></tr>
    <tr><td>U+00A0 No&#8209;break Space</td><td>Honey&nbsp;Nut&nbsp;Cheerios, Wheat&nbsp;Chex, Grape&#8209;Nuts, Rice&nbsp;Krispies, Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name, Honey&nbsp;Bunches&nbsp;of&nbsp;Oats, Wheaties, Special&nbsp;K, Froot&nbsp;Loops, Apple&nbsp;Jacks</td></tr>
  </tbody>
</table>

Upvotes: 10

Stephan Weinhold
Stephan Weinhold

Reputation: 1643

There's a very neat RWD-solution from Dan Mall that I prefer. I'm going to add it here because some other questions regarding responsive line breaks are marked as duplicates of this one.
In your case you'd have:

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

And one line of CSS in you media query:

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}

Upvotes: 33

gooflord
gooflord

Reputation: 5

You can just adjust the margin settings in CSS (margin-right in this case).

text {
    margin-right: 20%;
}

Upvotes: -3

user3186555
user3186555

Reputation:

An easy answer is to use the zero-width space character &#8203; It is used for making breakspaces inside words at specific points.

Does the exact opposite of the non-breaking space &nbsp; (well, actually the word-joiner &#8288;)(word-joiner is the zero-width version of non-breaking space)

(there are also other non breaking codes like the non-breaking hyphen &#8209;)(here is an extensive answer on different 'variants' of nbsp)

If you want an HTML-only (no CSS/JS) solution you could use a combination of the zero-width space and the non-breaking space, however this would be really messy, and writing a human-readable version requires a little 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 with no 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 email html rendering is not completely standardized, its good for that kind of use since this solution uses no CSS/JS

Also, if you use this in combination with any of the <span>-based solutions, you will have complete control of the line-breaking algorithm

(editorial note:)

The only problem I could see you having is if you wanted to change the points of preferred breakage dynamically. This would require constant JS manipulation of each of the spans proportionate size, and having to handle those HTML entities in the text.

Upvotes: 16

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

The answer is no (You cannot alter the line breaking algorithm used).

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

You can go near with the non-breaking-space &nbsp; but only between words that go together (what you have in spans, but not after the comma ), or you can use the white-space:nowrap as @Marcel mentioned.

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

Upvotes: 2

Eggert J&#243;hannesson
Eggert J&#243;hannesson

Reputation: 1946

By using

span.avoidwrap { display:inline-block; }

and wrapping the text I want to be kept together in

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

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

Upvotes: 193

ACarter
ACarter

Reputation: 5697

New answer now we have HTML5:

HTML5 introduces the <wbr> tag. (It stands for Word Break Opportunity.)

Adding a <wbr> tells the browser to break there before anywhere else, so it's easy to make words break 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 is supported my all major browsers apart from IE.

Upvotes: -1

Marcel
Marcel

Reputation: 28087

With your mark-up above use span { white-space:nowrap }. It's as good as you can expect really.

Upvotes: 2

justacoder
justacoder

Reputation: 2704

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

Upvotes: -3

Related Questions