html - 为什么设置很多数据时输入隐藏

Question

1周前我试图知道那个问题是什么，但我找不到解决方案，所以我屈服于这个问题

问题是当输入大量数据时输入消失了检查下面的图像

短数据 Image1

长数据 Image2

.container {
  width: auto;
  height: 100vh;
  text-align: center;
}

.container .con-1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="container">
  <div class="con-1">
    <input type="text" placeholder="for test">
    <div class="a">
      <span>test test test test test</span>
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

这段代码解决了你的问题

.container {
    margin-left:auto;
    margin-right:auto
    height: 100vh;
    text-align: center;
    top:50%;
    position:absolute;

}

<div class="container">
    <div class="con-1">
        <input type="text" placeholder="for test">
        <div class="a">
            <span>test test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test test</span>
        </div>
    </div>
</div>