All Possible Ways To Prevent a Long String of Text From Overflowing it's Container Tutorial/Demo

UPDATE: Now that all browsers are up to speed, 9 times out of 10 div{word-wrap:break-word;} is going to be your easiest bet.

This is what happens to a long string of text in a fixed width box - it overflows!

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Use a <br> tag to add a line break

Code

TextTextTextTextTextTextTextTextTextTextTextTextText<br>
TextTextTextTextTextTextTextText

Result

TextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextText

Use PHP to add a line break at a specified character length

Code

<?php $text = "TextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextText";
$text = wordwrap($text, 52, "\n", 1);
print $text; ?>

Result

TextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextText

Use Javascript to add a line break at a specified character length

Code

<p id="break">TextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextText</p>

<script type="text/javascript">
// The script MUST come after <p id="break">
String.prototype.breakAt=function(a){return this.substr
(0,a)+'<br>'+this.substr(a)};var a=document.getElementById
('break');a.innerHTML=a.innerHTML.breakAt(52);
</script>

Result

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

div{overflow:auto}

Code

div {
overflow:auto;
}

Result

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

div{word-wrap:break-word;}

Code

div {
word-wrap:break-word;
}

Result

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

wrap it in a <textarea> tag - FX/Opera oveflow auto it - IE/Safari/Chrome wrap it!

Code

<textarea readonly>
TextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextText
</textarea>

Result

<textarea> with JS Max Character Limit

Code

<script type="text/javascript">
function limitText(textArea, length) {
    if (textArea.value.length > length) {
        textArea.value = textArea.value.substr(0,length);
    }
}
</script>

<textarea onKeyPress="limitText(this,40);"></textarea>

Result

<input> tag with Maxlength attribute

Code

<input type="text" maxlength="15">

Result

TRY IT! - Input Text Here...

Javascript shortlinks.js (i.e. makes links shorter)

Code

Download From OnlineTools.org
http://www.i-am-a-very-very-very-very-long-link.com

Result

http://www.i-am-a-very-very-very-very-long-link.com

html entitie &#8203;

Code

TextTextTextTextTextTextTextTextTextTextTextText&#8203;
TextTextTextTextTextTextTextText

Result

TextTextTextTextTextTextTextTextTextTextTextTextText​TextTextTextTextTextTextTextText

Zero Width Space &#x200b;

Code

TextTextTextTextTextTextTextTextTextTextTextText&#x200b;
TextTextTextTextTextTextTextText

Result

TextTextTextTextTextTextTextTextTextTextTextTextText​TextTextTextTextTextTextTextText

Soft Hyphen &shy; But it adds a " - " at break point

Code

TextTextTextTextTextTextTextTextTextTextTextText&shy;
TextTextTextTextTextTextTextText

Result

TextTextTextTextTextTextTextTextTextTextTextTextText­ TextTextTextTextTextTextTextText

<wbr> - but does not work in Opera 9.5

Code

TextTextTextTextTextTextTextTextTextTextTextText<wbr>
TextTextTextTextTextTextTextText

Result

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

span{float:left;}

Code

span {
float:left;
}
TextTextTextTextTextTextTextTextTextTextTextTextText
<span>TextTextTextTextTextTextTextText</span>

Result

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

document.write with line break ( \r\n )

Code

<script type="text/javascript">
document.write('TextTextTextTextTextTextTextTextText\r\n
TextTextTextTextTextTextTextText');
</script>

Result

A table will expand along with the overflow text

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText