调整文本框的高度

Question

当您将鼠标悬停在文本上时，我正试图在图像上显示文本。使用下面的代码，我已经成功地做到了，但我遇到了一个特定的问题。我想根据我的喜好调整文本框的高度。因此，正如您在CSS上看到的，我使文本略微可见，但是由于文本框中有大量文本，它覆盖了我图像的近一半。我想调整文本框，使其覆盖至少1/4的图像，但当我把新的高度，网站崩溃。有人能告诉我如何调整文本框的高度吗？

-HTML--

<div class="gallery" id="nasaNews">
                        <img src="NasaLive.jpg" />
                        <div class="overlay">
                            NASA is now live-streaming views of Earth from space captured by four commercial high-definition video cameras that were installed on the exterior of the International Space Station last month. The project, known as the High Definition Earth Viewing (HDEV) experiment, aims to test how cameras perform in the space environment. You can see the live HD views of Earth from space above.To view the Nasa Live follow the Youtube Link: 
                            </div>
                    </div>

--CSS--

#nasaNews {
    position: relative;
}


    #nasaNews div {
        position: absolute;
        resize: both;
        min-height: 10px;
        line-height: 20px;
        bottom: 0;
        right: 5px;
        background: white;
        color: black;
        margin-bottom: 5px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        opacity: 0.5;
        visibility: visible;
        -webkit-transition: visibility 0s, opacity 0.5s ease-in-out;
        transition: visibility 0s, opacity 0.5s ease-in-out;
    }

    /* Hover on Parent Container */
    #nasaNews:hover {
        cursor: pointer;
    }

        #nasaNews:hover div {
            width: inherit;
            height: inherit;
            visibility: visible;
            opacity: 1;
            text-align: center;
        }

Answer 1

这应该做的trick.Yellow是你的形象。

你错的地方是你忘了把高度和宽度放在你的父容器类#nasaNews上。

​

#nasaNews {
  overflow: hidden;
  position: relative;
  padding: 15px 15px;
  box-sizing: border-box;
  width: 250px;
  height: 250px;
}

.myimg {
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: yellow;
  height: 100%;
  width: 100%;
}

#nasaNews .overlay {
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
  resize: both;
  line-height: 20px;
  background: #0000007a;
  color: white;
  box-sizing: border-box;
  
  padding-top: 45px 10px;
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: auto;
  resize: none;
  opacity: 0;
  text-align: center;
  -webkit-transition: visibility 0s, opacity 0.5s ease-in-out;
  transition: visibility 0s, opacity 0.5s ease-in-out;
  
}


/* Hover on Parent Container */

#nasaNews:hover {
  cursor: pointer;
}

#nasaNews:hover .overlay {
  opacity: 1;
  height: 100%;
  text-align: center;
}

<div class="gallery" id="nasaNews">
  <img src="NasaLive.jpg" class="myimg" alt="My Image" />
  <div class="overlay">
    NASA is now live-streaming views of Earth from space captured by four commercial high-definition video cameras that were installed on the exterior of the International Space Station last month. The project, known as the High Definition Earth Viewing (HDEV)
    experiment, aims to test how cameras perform in the space environment.
    You can see the live HD views of Earth from space above.To view the Nasa Live follow the Youtube Link:
  </div>
</div>

​

Answer 2

您可以使用CSS控制它，有几个选项：

溢出:隐藏的->所有的文本溢出将被隐藏。

溢出:可见的->让文本溢出可见。

溢出:如果文本溢出，滚动->放置滚动条

单词换行:断词->自动换行符，而不是隐藏或制作滚动条。

将这些属性放入包含文本的div中。