Ask Ben: Truncating The Event Titles In A Calendar Display 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Long Event Title Display Truncation</title>
 
	<style type="text/css">
 
		table.calendar {}
 
		table.calendar td {
			border: 1px solid ##999999 ;
			font: 11px verdana ;
			padding: 3px 3px 3px 3px ;
			vertical-align: top ;
			}
 
		table.calendar tr.header td {
			background-color: ##F0F0F0 ;
			font-weight: bold ;
			text-align: center ;
			}
 
		table.calendar tr.day a.number {
			background-color: ##666666 ;
			border: 1px solid ##333333 ;
			color: ##FFFFFF ;
			display: block ;
			font-size: 9px ;
			margin: 0px 0px 3px auto ;
			text-align: center ;
			text-decoration: none ;
			width: 15px ;
			}
 
		table.calendar tr.day a.event {
			border: 1px solid ##CC0000 ;
			color: ##333333 ;
			display: block ;
			height: 30px ;
			margin-bottom: 2px ;
			overflow: hidden ;
			text-decoration: none ;
			width: 99% ;
			}
 
		table.calendar tr.day a.event:hover {
			height: auto ;
			}
 
		table.calendar tr.day a.event span {
			background-color: ##CC9999 ;
			border-bottom: 1px solid ##CC0000 ;
			color: ##FFFFFF ;
			display: block ;
			font-size: 9px ;
			line-height: 13px ;
			text-align: center ;
			white-space: nowrap ;
			}
 
	</style>
</head>
<body>
 
	<table width="100%" class="calendar">
	<colgroup>
		<col width="13%" />
		<col width="15%" />
		<col width="15%" />
		<col width="15%" />
		<col width="15%" />
		<col width="15%" />
		<col width="12%" />
	</colgroup>
	<tr class="header">
		<td>
			Sun
		</td>
		<td>
			Mon
		</td>
		<td>
			Tue
		</td>
		<td>
			Wed
		</td>
		<td>
			Thr
		</td>
		<td>
			Fri
		</td>
		<td>
			Sat
		</td>
	</tr>
	<tr class="day">
		<td>
			<a href="##" class="number">2</a>
		</td>
		<td>
			<a href="##" class="number">3</a>
 
			<a href="##" class="event">
				<span>8:00 AM</span>
				This is a really long even title that
				will cause the link to become much too
				long for a nice display.
			</a>
 
			<a href="##" class="event">
				<span>10:00 AM</span>
				This is a really long even title that
				will cause the link to become much too
				long for a nice display.
			</a>
		</td>
		<td>
			<a href="##" class="number">4</a>
		</td>
		<td>
			<a href="##" class="number">5</a>
		</td>
		<td>
			<a href="##" class="number">6</a>
		</td>
		<td>
			<a href="##" class="number">7</a>
		</td>
		<td>
			<a href="##" class="number">8</a>
		</td>
	</tr>
	</table>
 
</body>
</html>

For Cut-and-Paste