html - 使用显示 :table-row 在 HTML 表格中自动换行

Question

一个更复杂的版本:Word-wrap in an HTML table .

我正在尝试为我的 table 创建一个漂亮的移动版本。我正在使用引导媒体查询来应用两个 CSS 规则:

1. display:table-row; - 这会将每个单元格放在一个新行上。
2. word-wrap:break-word; - 这使得长单词跨越多行。

麻烦的是这两条规则似乎有冲突。当我使用 display:table-row; 时，文本不换行。删除 display:table-row; 会导致文本再次换行。

有什么方法可以同时使用 display:table-row; 和 word-wrap:break-word;？

jsfiddle 代码:http://jsfiddle.net/q46Vd/

Answer 1

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