Long string is not splitting on multiple lines in IE

Question

I have a large querystring like

http://terra.cic.local/web/index.cfm//pm/uebersicht?sucheAufgeklappt=was%2Cwie%2Cwohin%2Cwann%2Cwer&sucheVon=&sucheBis=&sucheIstErsteSeiteAnzahlProdukteErmitteln=false&sucheIDReiseart=26&sucheHotelart=1081&sucheHotelart=1082&sucheIDLand=347&sucheRegion=214&sucheIstZeitlichFlexibel=true&sucheDauer=&sucheAnzahlErwachsene=2&sucheAnzahlKinder=0&sucheAnzahlPersonen=2&sucheAnzahlSchlafzimmer=&sucheEntfernungStrand=&sucheEntfernungSkilift=

this link will be pasted displayed in a div with 700px width. in FF it will be splitted on multiple line but in IE not.The conplete string is displayed in single line. and break the page layout.

Any suggestion?

Thanks.

Answer 1

If you want a hyphenation character at the end of the line, you can use the ­ HTML entity.

But if you just want a line break, insert the <wbr> element within your link text. Be aware of browser inconsistencies, described at Quirksmode.org.

That said, I would change the link text to something more meaningful than such a long URL.

Answer 2

Using the following styles:

.divideMe{
width:100px;
word-wrap: break-word;
}

<div class='divideMe'>reallyreallyreallyreallyreallyreallylongstring</div>

It would output

reallyreallyreally
reallyreallyreallyl
ongstring

Though it doesn't really break the word in chunks so you can still select it by double (triple) clicking it. I'm not sure of how browser compatible this is but it seems to work fine on the browsers I have available. Keep in mind that it's a CSS3 property.

Tested on IE 6,7,8 works fine. Also fine on FF 3.6

Another solution would be to hide the overflow and show a scroll bar if you want to keep it in one line. But since your first approach was to show the whole string instead of hiding it, I think this may be a good approach.