Grow your CSS skills. Land your dream job.

Text wrapping in table column

  • # November 18, 2012 at 7:34 pm

    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?

    # November 18, 2012 at 7:58 pm

    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.

    # November 18, 2012 at 8:52 pm

    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).

    # November 19, 2012 at 2:39 am

    @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.

    # November 19, 2012 at 2:17 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".