溢出:隐藏

Question

我似乎不明白为什么我的overflow: hidden不能正常工作。据我所知，它将切断任何设定的尺寸，但随着我的工作，它应该在悬停时充分显示出来。所以我在div中设置了文本，它会被截断，直到你将鼠标悬停在它上面。将鼠标悬停在该框上后，该框需要展开并显示隐藏的文本。下面是代码和它需要看起来像什么的图像。

​

​

​

.flexbox {
  width: 600px;
  height: 420px;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.flexbox>div {
  -webkit-transition: 1s ease-out;
  transition: 1s ease-out;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid black;
  width: 295px;
  margin: -5px;
  padding: 20px 20px 20px 20px;
  box-shadow: 10px 10px 10px dimgrey;
}

.flexbox>div:nth-child(1) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(2) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(3) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(4) {
  background-color: lightgrey;
}

.flexbox>div:hover {
  width: 300px;
  color: white;
  font-weight: bold;
}

.flexbox>div:nth-child(1):hover {
  background-color: royalblue;
}

.flexbox>div:nth-child(2):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(3):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(4):hover {
  background-color: darkgreen;
}

p {
  height: 100px;
  overflow: hidden;
  font-family: "Rosario"
}

img {
  float: left;
}

<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>

<div class="flexbox">
  <div><img src="http://prism.troy.edu/gpratt68237/images/GPP.png" alt="Good programming practice icon">
    <p>Good Programming Practices call attention to techniques that will help you produce programs that are clearer, more understandable and more maintainable.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/EPT.png" alt="Error prevention tip icon">
    <p>Error-Prevention Tips contain suggestions for exposing bugs and removing them from your programs; many describe aspects of programming that prevent bugs from getting into programs in the first place.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/CPE.png" alt="Common programming error icon">
    <p>Common Programming Errors point out the errors that students tend to make frequently. These Common Programming Errors reduce the likelihood that you'll make the same mistakes.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/SEO.png">
    <p>Software Engineering Observations highlight architectural and design issues that affect the construction of software systems, especially large-scale systems.
    </p>
  </div>
</div>

​

任何帮助都是非常感谢的。

Answer 1

当鼠标悬停在div上时，需要为<p>标记提供height: auto。

因为这样不会加载该代码片段中的图像，所以这里有一个fiddle

​

.flexbox {
  width: 600px;
  height: 420px;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.flexbox>div {
  -webkit-transition: 1s ease-out;
  transition: 1s ease-out;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid black;
  width: 295px;
  margin: -5px;
  padding: 20px 20px 20px 20px;
  box-shadow: 10px 10px 10px dimgrey;
}

.flexbox>div:nth-child(1) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(2) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(3) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(4) {
  background-color: lightgrey;
}

.flexbox>div:hover {
  width: 300px;
  color: white;
  font-weight: bold;
}

/* Added this rule */
.flexbox > div:hover p {
  height: auto;
}

.flexbox>div:nth-child(1):hover {
  background-color: royalblue;
}

.flexbox>div:nth-child(2):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(3):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(4):hover {
  background-color: darkgreen;
}

p {
  height: 100px;
  overflow: hidden;
  font-family: "Rosario"
}

img {
  float: left;
}

<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>

<div class="flexbox">
  <div><img src="http://prism.troy.edu/gpratt68237/images/GPP.png" alt="Good programming practice icon">
    <p>Good Programming Practices call attention to techniques that will help you produce programs that are clearer, more understandable and more maintainable.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/EPT.png" alt="Error prevention tip icon">
    <p>Error-Prevention Tips contain suggestions for exposing bugs and removing them from your programs; many describe aspects of programming that prevent bugs from getting into programs in the first place.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/CPE.png" alt="Common programming error icon">
    <p>Common Programming Errors point out the errors that students tend to make frequently. These Common Programming Errors reduce the likelihood that you'll make the same mistakes.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/SEO.png">
    <p>Software Engineering Observations highlight architectural and design issues that affect the construction of software systems, especially large-scale systems.
    </p>
  </div>
</div>

​

Answer 2

p:hover { overflow: visible; }

你需要在你的css中使用它