Word-wrap in an HTML table using display:table-row

Question

A more complex version of: Word-wrap in an HTML table.

I'm trying to create a nice mobile version of my table. I'm using bootstrap media-queries to apply two CSS rules:

display:table-row; - This puts each cell on a new row.
word-wrap:break-word; - This makes long words go over multiple lines.

The trouble is that these two rules seem to conflict. When I use display:table-row;, the text does not wrap. Removing display:table-row; causes text to wrap again.

Is there any way I can use both display:table-row; and word-wrap:break-word;?

jsfiddle with code: http://jsfiddle.net/q46Vd/

score 0 · Accepted Answer · answered May 04 '14 at 22:34

0

Try word-break: break-word instead of word-wrap: break-word.

answered May 04 '14 at 22:34

denmch

1,446
12
20

I decided to look into this, and it may be webkit-only. :/ – denmch May 04 '14 at 22:42
'word-break: break-all' is more correct and seems to work in IE. – Andrew Downes May 04 '14 at 22:58

score 0 · Answer 2 · answered May 04 '14 at 22:36

0

Solved it. I replaced display:table-row with display:block.

http://jsfiddle.net/q46Vd/1/

answered May 04 '14 at 22:36

Andrew Downes

547
7
13

1

`display: table` may also work. `table-row` has *strange* properties like no background, margin, padding (at least on Firefox and/or spec). An element styled as table or table-cell can see these properties applied (except margin on cells). It also confers [Block Formatting Context](http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/) that have interesting effects alongside floats (that you may or may not want!) – FelipeAls May 06 '14 at 09:39

Word-wrap in an HTML table using display:table-row

2 Answers2