css - CSS - 如何使内容适合段落的宽度/高度？

Question

我有一个使用 p 标签的 HTML 段落。现在我想改变这个段落的高度和宽度，所以它只显示段落的开头（头部），然后当我将鼠标悬停在它上面时，它会显示整个段落。我如何使用 CSS 做到这一点？

注意** 我无法更改 HTML 代码，所以我只能使用 CSS 进行调整。

Answer 1

以下基本代码适用于您，您可以根据需要对其进行修改以启用 CSS 动画等。

p {
  // Put whatever height you want here, we're using max-height here so that
  // paragraphs that are smaller than this don't get extra blank spacing.
  max-height: 20px;

  // Hide the extra content
  overflow: hidden;
}

p:hover {
  max-height: none;
}

Answer 2

如果你对这些东西使用 JavaScript 会更好，但如果你坚持使用 CSS，那就去吧。

p{
    border: solid;
    height: 10px;
    overflow:hidden;
}
p:hover{
    height: 100%;
}

这里有一个小例子