两行下拉菜单

Question

嗨，我在创建带有下拉菜单的导航栏时遇到了一些麻烦，我只需要一行就可以获取所有信息，但是菜单名称和箭头却不在同一位置。

创建CSS元素：.dropdown-toggle::after{display: inline-block;}

我的导航栏如下所示：

我尝试了在Bootstrap网站上找到的大多数dropdown / navbars示例，但是每次我都将结果显示为两行时。如何解决此问题，以使标签和箭头位于同一行？

Answer 1

重要点：

1. 如果您需要在一行中显示所有内容，请使用white-space: nowrap;或减小字体大小。
2. 如前所述，您需要在同一行中使用箭头，但这并不是因为其中的空间较小，因此请使用绝对位置的箭头。
3. 通过空格属性将其设置为单行后，您将需要在其中创建省略号，以使内容看起来不会奇怪。
4. 省略号：在其父级上使用overflow:hidden;，在文本上使用text-overflow:ellipsis