如何隐藏水平但不垂直的文本？

Question

使用简单的代码示例进行最佳说明：

.container {
  width: 100px;
  background: #f00;
  white-space: nowrap;
  font-size: 30px;
  height: 20px;
  overflow-x: visible;
  overflow-y: hidden;
}

<div class="container">gggg gggg gggg gggg</div>

我正在使用属性：

overflow-x: visible;
overflow-y: hidden;

并希望隐藏在容器外水平移动的文本，但垂直跨越的文本/字符将保持可见。

澄清用例：

我想限制容器的宽度和高度。溢出的文字需要被切断。

可以使用简单overflow: hidden;和text-wrap: word-wrap;来完成此操作。问题是某些字体字符在行高/容器高度之外垂直溢出，例如

注意“g”和“y”字母。

因此，我的计划没有设置white-space: nowrap，并以某种方式强制只允许垂直溢出可见性。这导致两个问题：

• 看来我不能为overflow-x / overflow-y提供不同的可见性值。
• 我无法将text-wrap与white-space: nowrap
一起使用

Answer 1

我认为如果增加容器高度，代码可以正常工作。 所以说：

.container {
  width: 100px;
  background: #f00;
  white-space: nowrap;
  font-size: 30px;
  height: 40px;
  overflow-x: visible;
  overflow-y: hidden; 
  }

玩白色空间：环绕;和白色空间：nowrap;获得理想的结果。