阻止<p>标记包装到新行</p>

Question

我在<p>标记中有一些内容。出于某些原因，在IE＆lt; 8（也可能大于8）中，一行上最后一个<p>标记的内容会被包围。

有没有阻止这种情况发生？

示例link

N.B实际的表单将使用post而不是get，我刚刚更改了它，所以我可以链接到结果。

我的HTML

<div class="box">
    <p>
        <span class="letter taller"></span>
        <span class="letter"></span>
        <span class="letter taller"></span>
        <span class="letter hanging"></span>
    </p>
</div>

我的CSS

.letter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    padding-top 1.618em;
    border-width: 1px;
    border-style: solid;
    width: 2em;
    height: 2em;
}
.box {
    float: left;
    padding-left: 1.618em;
    padding-top: 5em;
}
.taller, .hanging {
    height: 4em;
}
.hanging {
    position: relative;
    top: 2em;
}

Answer 1

您可以将white-space: nowrap添加到p标记css，它将停止换行。

您可以在此处详细了解：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 2

如果我正确解释问题，您可以使用 。我会建议overflow-x，除了IE 8不理解它。