NOBR tag CSS alternative/analog

abstract

Sometimes it is necessary to put series of non-breaking spaces between words, to ensure that browser will not break line. Using multiple   (non-breaking space entity) is quite messy and <NOBR> from older versions of HTML is not defined in XHTML standard. This articles tells about CSS property which can substitute <NOBR> tag

compatible

CSS 2 and higher

Use CSS property "white-space: nowrap" for an element, which should contain non-breaking text.

You could add style class like .nobr and use it later instead of <NOBR> tag:

 
.nobr {white-space: nowrap}

Example:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Empty XHTML 1.0 Strict Document</title>
		<style type="text/css">
		.nobr {white-space: nowrap}	
		</style>
	</head>
	<body>
 
	<p>Test table #1 (word-wrapping):</p>
 
	<table style="width: 100%; margin-bottom: 3em; border: 1px solid black;">
	<tr><td style="width: 1%;">
	Popular keywords: free hosting CSS HTML guide
	tutorial information web-design
	</td>
	<td style="width: 99%; background-color: #CFF;">|</td>
	</tr>
	</table>
 
	<p>Test table #2 (nobr CSS class):</p>
 
	<table style="width: 100%; border: 1px solid black;">
	<tr><td style="width: 1%;">
	<div class="nobr">Popular keywords: free hosting CSS HTML 
	guide tutorial information web-design</div>
	</td>
	<td style="width: 99%; background-color: #CFF;">|</td>
	</tr>
	</table>
 
	</body>
</html>

tested by AnyExample.com on 2006-09-18

W3.org :: Validator
Windows XP :: Firefox 1.5
Windows XP :: Opera 9
Windows XP :: Internet Explorer 6.0

License | Privacy | Contact