调整文本框的高度

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

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

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

溢出：可见->让溢出的文字可见。

溢出：滚动 -> 如果文本溢出则放置滚动条

word-wrap: break-word -> 自动换行而不是隐藏或制作滚动条

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

Answer 2

这应该做的trick.Yellow是你的形象。
你错的部分是你忘了把高度和宽度放到你的父容器中class #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>

调整文本框的高度

Adjusting the height of the text-box

html

css

hover