Although this may seem pretty basic, I have seen it asked a few times, so it's certainly worth blogging about.

In some situations, you may want to restrict one line of text (usually a title) to be just that, one line of text to prevent any template height issues. Well its very easily done with some very simple css.

Let's take the below for example:

<style type="text/css">
h1{
  width:200px;
  margin:0;
  font-size:80%
}
</style>
<h1>This is some text I want to stay on one line</h1>

This snippet of code will wrap the text to two lines by default, but to stop the text wrapping and not busting out of the template, change the above style block to:

<style type="text/css">
h1{
  width:200px;
  margin:0;
  font-size:80%;
  overflow:hidden;
  white-space:nowrap
}
</style>

By adding the two green lines above, the title will never wrap to more than one line and it won't bust the width of it's container. Unfortunately this will only hide the text that flows beyond the 200px, but that is better than a busted template right?