Here is a fun challenge for those of you who have to deal with specific sized divs that contains dynamic text. What do you do with a div that you cannot or do not want to resize dynamically. Today, I have two solutions for you.

The first and simplest technique would be to use CSS to hide overflow content.

Lets take a simple piece of code.

view plain print about
1<div style="width:100px;border-top:1px solid #000000;">&nbsp;</div>
2<div style="border:1px solid #000000;width:100px;">
3This_is_an_unbroken_line_of_text!!!!!!!!
4</div>

What you'll see is two divs, one is a line which demonstrates how long 100 pixels really is. The other is the line of text showing how it will force the div to grow to the length of the text. If you set the width as absolute, worse yet, the text will spill out of the div into other content. A simple CSS fix for this is the usage of the overflow attribute. Overflow has several options. We'll be looking at two specifically.

The first is hidden. Setting overflow as hidden, as the example below will hide the extra text that would normally spill over.

view plain print about
1<div style="width:100px;border-top:1px solid #000000;">&nbsp;</div>
2<div style=""border:1px solid #000000;width:100px;overflow:hidden;">
3This_is_an_unbroken_line_of_text!!!!!!!!
4</div>

Alternatively, you can set the overflow attribute to scroll as the example below. The Scroll attribute will turn the div into a scroll box, allowing the fill text to be slid back and forth with a scroll bar.

view plain print about
1<div style="width:100px;border-top:1px solid #000000;">&nbsp;</div>
2<div style=""border:1px solid #000000;width:100px;overflow:scroll;">
3This_is_an_unbroken_line_of_text!!!!!!!!
4</div>

This is a great way of dealing with text if there are problems with the display, but recently I ran into a problem where a scroll box stuck out like a sore thumb, and hiding the text within my div wasn't an option. I started to wonder if there was a programmatic solution instead of a CSS oriented one. I didn't want to insert spaces or hyphens by estimating a character length, as 30 i's take up much less horizontal space than 30 m's in variable width fonts.

The fix as it turns out for my situation was the "&shy;" character. This character only appears as a hyphen and carriage return if a text overflow is found. Using regular expressions, one can insert this character into any words which are longer than a preset number of characters. Using the same example, I've used a regular expression to insert the character and the result can be seen below.

view plain print about
1<div style="width:100px;border-top:1px solid #000000;">&nbsp;</div>
2<div style=""border:1px solid #000000;width:100px;">
3<cfoutput>#reReplaceNoCase("
This_is_an_unbroken_line_of_text!!!!!!!!","([^\s]{3})([^\s]{3})","\1&amp;shy;\2","All")#</cfoutput>
4</div>

The code above inserts "&shy;" characters every 6 non-whitespace characters. If the text doesn't need to wrap the "&shy;" character is ignored, otherwise a hyphen and a line break appear. Now obviously this is an extreme example, rarely would we ever need a break every 6 characters, generally I set it to 10 using the following regex: ([^\s]{5})([^\s]{5})

I hope this little tidbit can help you as much as it's helped me!