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

Question

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

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

2018-12-19T12:00:06.660-0300 E QUERY    [js] SyntaxError: missing ) after argument list @(shell):29:44

div {
  width: 0px;
}

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;
}