html - css块宽度/高度

Question

我有以下CSS代码：

#nav {}
#nav a { 
         position: relative;
         display: inline-block;
         color: #F0F0F0;
         width: 1em;
         height: 2em;
         line-height: 0.9em;
}
#nav a.icon:before { padding-right: 0;} 

<nav id="nav">
  <a href="#me" class="fa fa-home active"><span>Home</span></a>
</nav>

但是如果文本超过10个字符，它会自动创建一个段落，使文本从原始框中删除。我该如何防止这种情况？

---

修改

---

我希望屏幕截图中的背景框随着文字的长度变宽，

http://prntscr.com/2cd973

Answer 1

您可以将您的内容显示为table-row。然后，您的链接将在表格中显示为新列。

#nav {
    display: table-row;
}

您可以在this fiddle上看到结果。

Answer 2

如果您的目标是在同一行显示所有内容，则只需从width:1em;

中删除#nav a

如果您要隐藏溢出的文字，请将overflow:hidden;添加到#nav a

如果您希望a代码调整其内容的高度和宽度，请从width:1em;

中删除height:2em;和#nav a

Answer 3

在 #nav ：

中添加此内容

word-wrap:break-word;