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

【问题标题】：CSS - how to make content fit to the width/height of paragraph?CSS - 如何使内容适合段落的宽度/高度？
【发布时间】：2013-10-12 15:39:06
【问题描述】：

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

注意**我无法更改 HTML 代码，因此我只能使用 CSS 进行调整..

【问题讨论】：

你有没有尝试过？

标签： css html tags paragraph

【解决方案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;
}

【讨论】：

非常感谢，我不知道溢出属性。

【解决方案2】：

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

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

一个小例子here

【讨论】：