Format long text string using css

Question

I have logn string which doesn't fit into table cell. Actually string is a single long word.

Is it possible using css only to wrap such long word?

I have:

|klasdflksadjflsadkfj;lasdkfj;lsdkfjldskfjlsadkfj;lsdkfjklsajdf|

I want:

|klasdflksadjflsadkfj;lasdkfj;lsd|
|kfjldskfjlsadkfj;lsdkfjklsajdf  |

score 3 · Accepted Answer · answered Mar 17 '11 at 12:11

3

you need:

 word-wrap: break-word

in CSS3;

for a cross-browser solution you need to alter the text in the cell (with javascript) and add some breaks.

answered Mar 17 '11 at 12:11

Caspar Kleijne

+1 More info: http://www.w3.org/TR/css3-text/#word-wrap, https://developer.mozilla.org/En/CSS/Word-wrap, http://msdn.microsoft.com/en-us/library/ms531186(VS.85,loband).aspx Test: http://jsbin.com/uyuku4 – T.J. Crowder Mar 17 '11 at 12:16
*"or a cross-browser solution..."* This would appear to be one of those places where the spec is chasing existing practice. The above works in IE6 and up, and current versions of Chrome, Firefox, Opera, and Safari. You may need to use the vendor-specific versions (e.g., `-ms-word-wrap`) if you're in a strict standards mode. – T.J. Crowder Mar 17 '11 at 12:19
@T.J Crowder: mind the word *table-cell* in the question... :) http://jsfiddle.net/tDUvf/ – Caspar Kleijne Mar 17 '11 at 12:26

score 0 · Answer 2 · answered Mar 17 '11 at 12:16

0

You can use word-wrap:break-word according to caniuse.com this property has good browser support.

answered Mar 17 '11 at 12:16

warmanp

2 Answers2