Text wrapping in table column

[TimMurphy]

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:

Ken Bald & Malcolm
Fletcher

I would prefer the wrapping to be:

Ken Bald &
Malcolm Fletcher

I also require that the wrapping can go even further, again when required, to:

Ken
Bald &
Malcolm
Fletcher

Is this possible with CSS and/or JavaScript?

[Senff]

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:

Jo Lee &
Alexandria
Montgomery-Smith

Actually looks better/more balanced than:

Jo
Lee &
Alexandria
Montgomery-Smith

Nothing wrong using <br />, I’d say.

[TimMurphy]

@andy_unleash Your solution is not quite perfect but a big improvement on what I had. Thank you.

See this [CodePen](http://codepen.io/TimMurphy/pen/HvKzi) 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.

[TimMurphy]

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.

[Author]

Posts