使用display：table-row在HTML表格中自动换行

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:

1. display:table-row; - This puts each cell on a new row.
2. 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/

Answer 1

尝试word-break: break-word而不是word-wrap: break-word 。

Answer 2

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

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