The Spaghetti Refactory Established 2015

Don't wrap specific CSS elements

Another quickie quickie CSS tricky:

Let’s say you’re trying to make a site responsive to many different screen sizes, like you have to these days. You have a block of text that needs to wrap, but you also have a word or number you don’t want to get wrapped. The best example for this I can think of is a phone number – you don’t want it display weird like this:

    Call Jenny today! 800-867-
5309

Wrap that word or number or whatever in a span and style it with "white-space: nowrap;". Then, that particular element will wrap as one piece:

    Call Jenny today! 
800-867-5309

Tags