如何将文本元素设置为0px宽度

Question

为了产生过渡效果，我想知道是否可以将宽度设置为包含文本的HTML元素上的0像素。当用户单击时，元素将增长。

如果我这样做，文字仍然会出现，这不是我想要的：

div {
  width: 0px;
}

<div>Hello world!</div>

Answer 1

该元素为零宽度（您可以通过添加边框看到），但是文本溢出容器，因此仍然可见：

div {
  width: 0px;
  border:1px solid
}

<div>Hello world!</div>

要纠正此问题，将"溢出：隐藏"添加到元素：

div {
  width: 0px;
  overflow: hidden;
}

<div>Hello world!</div>

Answer 2

div {
  width: 0px;
  overflow-x: hidden;
}