Question

HTML <textarea>在首次加载[加载页面时]时，动态文本显示其高度的一半，如下所示：

当您对焦并开始键入或按下向左或向右箭头键时，它会将文本显示为完整高度，因为它应该是这样。

如何在第一次加载时使动态文本显示在其完整高度，而不必专注于<textarea>并按下右/左箭头键？这是HTML和CSS代码：

textarea {
  height: 55px;
  background-color: #009688;
  font-size: 55px;
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid white;
}

<textarea id="location" style="overflow:hidden"></textarea>

谢谢。

Answer 1

我认为这是因为您添加了填充/边距。尝试通过删除填充/边距来运行，看看它是否适合您。

Answer 2

试试这个：我只是删除填充。您还可以添加填充，只需添加更多高度

<强>解释

字体大小和textarea的高度与填充 PLUS 相同。

＆＃13;

textarea {
    height: 55px;
    background-color: #009688;
    font-size: 55px;
    width: 100%;
    /*padding: 12px 20px;*/
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}

＆＃13;

<textarea id="location" style="overflow:hidden">Prefilled</textarea>

＆＃13;

Answer 3

您可以在代码中 min-height 更改身高

＆＃13;

textarea {
    min-height: 55px;
    background-color: #009688;
    font-size: 55px;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}

＆＃13;

<textarea id="location" style="overflow:hidden" >some text</textarea>

＆＃13;

Answer 4

您希望高度包含填充和边框大小，因为您使用了框尺寸，因此您的高度应该是字体的大小加上顶部和底部填充和边框

在这种情况下，55px（字体）+ 24px（12px顶部和12px底部填充）+ 2px（边框 - 你没有顶部和2px底部）= 81px

textarea {
    height: 81px;
    background-color: #009688;
    font-size: 55px;
    line-height:55px;         /* added this just to ensure the line height is the same as the font size */
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}

<textarea id="location" style="overflow:hidden">someText</textarea>

Answer 5

请检查更新的。将行高和更新后的属性添加到rows=1，而不是为textarea提供高度。

textarea {
    min-height: 55px;
    background-color: #009688;
    font-size: 55px;
    line-height: 60px;
    width: 100%;
    padding: 0 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}

<textarea id="location" rows="1" style="overflow:hidden"></textarea>

Answer 6

只需增加高度，因为高度和字体大小相同：

textarea {
    height: 80px;
    background-color: #009688;
    font-size: 55px;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}

Answer 7

调整字体大小和填充

padding: 12px 12px;
and 
font-size: 40px;

HTML textarea显示动态文本的一半高度

7 个答案: