In a previous article I explained how hyphens could effect the layout of text and require some complex work arounds with the default settings. In this article I am going to show you a much simpler solution, thanks to the magic of CSS.
CSS is a set of commands which allow you to alter the default layout of your HTML. It is extremely powerful and its only weakness is the fact that it is not supported by all browsers in the same way. By the way do you ever get that sinking feeling when you find the perfect CSS command followed by the dreaded ‘Not supported in all browsers‘ comment?
Well CSS has a really neat trick for handling cases like this. You can add these 2 very useful commands to the CSS attached to the div.
white-space:nowrap; overflow:visible;
The first tells the browser not to wrap the contents of the div where it finds white space (which includes hyphens) while second defines how any overflow is handled. It is a really good example of how useful CSS can be. Do you have any favourite tricks with CSS?
