阻止 <p> 标签换行

Question

我在<p>标签中有一些内容。出于某种原因，在 IE<8（也可能大于 8）中，<p>一行上最后一个标签的内容会环绕。

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

示例链接

注意，实际表单将使用 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