It's possible to break it after each word but I'm not sure you'd always want that. For very, very short names, you might actually prefer it on one line. Example:
I would wrap each part I want to be on its own line in a span with a class of nowrap for example, then have .nowrap { white-space: nowrap; }
What this will do is then if they don't fit the container it will break in between each span.
This way you can avoid having to use - this is especially handy when doing responsive sites, mainly because you don't necessarily want the break to be present at larger screen sizes (for example).
@andy_unleash Your solution is not quite perfect but a big improvement on what I had. Thank you.
See this CodePen for an implementation. Resize your browser window to see the effect.
Using media queries should allow me to come up with the perfect solution. I'll post a comment when I've done that. It will be several hours before I get back to this.
Is there a way to control where wrapping occurs, when required, for text within a table column?
Taking an example from my site http://www.croquetscores.com/tournaments/53/blocks/280/grid.
If the browser width demands wrapping then the first level of wrapping in the player column is:
I would prefer the wrapping to be:
I also require that the wrapping can go even further, again when required, to:
Is this possible with CSS and/or JavaScript?
It's possible to break it after each word but I'm not sure you'd always want that. For very, very short names, you might actually prefer it on one line. Example:
Actually looks better/more balanced than:
Nothing wrong using
<br />, I'd say.What you can do is take advantage of white-space: nowrap
Article from Chris here which explains how you can use white-space http://css-tricks.com/almanac/properties/w/whitespace/
I would wrap each part I want to be on its own line in a span with a class of nowrap for example, then have .nowrap { white-space: nowrap; }
What this will do is then if they don't fit the container it will break in between each span.
This way you can avoid having to use
- this is especially handy when doing responsive sites, mainly because you don't necessarily want the break to be present at larger screen sizes (for example).
@andy_unleash Your solution is not quite perfect but a big improvement on what I had. Thank you.
See this CodePen for an implementation. Resize your browser window to see the effect.
Using media queries should allow me to come up with the perfect solution. I'll post a comment when I've done that. It will be several hours before I get back to this.
As promised I have updated http://codepen.io/TimMurphy/pen/HvKzi to work exactly how I want the wrapping to work. Many thanks to @andy_unleash for the idea.