html - 无法让文本在设置区域内的网格上换行

Question

我正在尝试将两个单独的文本放在网格上的同一行上，我希望这些单词在网格（或 CSS 边框）的约束内环绕。目前输出是文本没有换行。少了什么东西？

<h2 class="text" class="grid_6">Best cheese I've ever tasted!</h2>
<h2 class="text" class="grid_6">Cannot wait to place our next order!</h2>

CSS

.text {
    word-wrap:break-word;
    display:inline;
}

Answer 1

尝试添加

float:left

在你的 CSS

Answer 2

像这样给display:inline-block;

演示

CSS

 .text {
        word-wrap:break-word;
        display:inline-block;
}