Dealing with user-supplied long titles with no spaces


Wonder if anyone has opinions on the best way to deal with the following problem:

Our web site accepts user input of titles and we limit the length of titles, but once in a while a user will enter a long string of text with no spaces. For example:


When displaying that title, I want the browser to wrap it, as it would if there were spaces.

I’d rather not force breaks server-side, because:
a) we don’t know reliably whether a particular comma is really a “word boundary” (it could be part of a number like “1,234”)
b) the width where it will be displayed is not necessarily known on the server side.

Any suggestions?


I wonder if it’s possible to reject an entry that has more than, say, 50 characters without a space (or at least, an “Are you sure?” box)

Thanks for your suggestion Stevie.

Certainly that could be part of the solution, but we already have many titles existing.

I’m thinking a clever regex might work, with a human double checking.

When you say title you don’t mean <title> tags right? As browsers don’t wrap those.

There is a CSS property that’s a very harsh break called word-wrap: break-word. It was originally IE-only but has been added to CSS3, so more and more modern browsers are supporting it. However you will not have that support in old browsers.

another thought is adding &shy or & # 173; soft hyphens if there is 50 chars of unbroken (and non-link) text. The worst this can do is add a - and wrap the rest on a new line which, again a regex to check that it’s not in the middle of a number or something, might be acceptable.

FF2 does not support soft hyphens but maybe that is not a browser you are building for anyway.

Hi Stomme,

Thanks for this – it put me on the right track. (Right, I did NOT mean <title> tag)

I think my solution will be to server-side include a class or inline style only to titles that violate some regex rule (such as having too many characters without spaces).

// PHP psuedo code:
// if >= 50 concurrent non-space characters, include class “breakWords”

<span class=“breakWords”>Colors:Red,blue,green,yellow,orange,violet,mauve,chartruese</span>

// css:

span.breakWords { word-wrap: break-word; }

The soft-hypen approach may work as well.

Thanks all!


The soft hyphen will I think work on MORE browsers than break-word… though it does mean adding a character to the content itself.

the benefit of a scriptie adding softhyphen is, dependent on user font-size, if a break isn’t needed there you won’t see it. And you can set where the break is (graceful).

Break-word will break exactly wherever the text gets too long… right at the very char who’s one char too far.

You may get long title and the wo
rd will break in the middle.

Do the extra long entries always contain commas? If so then you could have the server automatically add a space after each comma. You could also do the same with other punctuation symbols if necessary.

Hi felgall,

No, the very long entries do not always contain commas. Sometimes it might be a URL for example.

Regardless, forcing spaces after commas would affect numbers, such as:


Of course, we could use regex to only affect commas between 2 non-numeric characters. That’s one option.


Is it necessary to display the entire title? A possible alternative would be to abbreviate the string, like this:

$title = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

if(strlen($string) > 50) {
 $title = substr($title, 0, 30)." (...) ".substr($title, -20);

// returns abcdefghijklmnopqrstuvwxyzABCDE (...) QRSTUVWXYZ0123456789

C -

Thank you for that suggestion.

For our case, we’d prefer to show the entire title – I’d rather force a non-ideal line break, so that at least the data remains discernable.