将元素的宽度/高度固定为它是什么

Question

我有一个应该是水平主菜单的div 元素。我使用了ul 和它的lis 作为菜单项。 lis 是 inline-block，所以他们制作了一个水平菜单。我将div 的宽度设置为100%，但我没有为div 设置任何高度，因此它的高度由它的填充、边框和内容定义。现在我想将它的高度固定为它的高度（不直接定义），所以我可以使用overflow 在较小的屏幕尺寸上隐藏溢出的菜单项。我认为这对响应式设计很有好处。可以用纯CSS来完成吗？

目前，当我缩小浏览器的宽度时，菜单项会堆积起来，使菜单项超过 1 行，并强制 div 的高度适合。我只想查看第一行菜单项。

Answer 1

您可以使用 css 确保 div 的内容保持在一行

white-space: nowrap;

如果你想要多行，你可以这样做

max-height: 3em; (or whatever value is appropriate)

当溢出的内容溢出元素时，请注意它的外观，它可能会突然从视野中消失并看起来有点讨厌。如果只是文本，您可以使用

text-overflow: ellipsis;

但如果您处理的是实际元素，那就更复杂了！可以只使用 css 和伪元素创建漂亮的淡入淡出，这就是我会做的。