css - DIV中的多行内容，只显示第一行，如果点击，显示全部和contenteditable

Question

这个问题让我摸不着头脑

1. 如何使用CSS让DIV只显示多行内容的第一行？
2. 如何将 DIV 高度设置为一行，但实际上包含多行？
3. 这可以不用任何 javascript 来完成吗？我必须在单击 DIV 并通过将其属性设置为 contenteditable 来编辑 DIV 后显示完整内容，最好只使用 CSS 选择器选择 non-first-行内容并将其隐藏。

Answer 1

很简单:

.magic {
  height: 1em;
  overflow-y: hidden;
}

.magic:active {
  height: auto;
}

确保不是 :active您正在使用合适的选择器。

高度必须等于行高。这并不总是等于 1em。