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

Question

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

当您集中注意力并开始打字或按向左或向右箭头键时，它会按应有的全高显示文本。

如何使动态文本在首次加载时以全高显示，而无需关注 <textarea> 和按 right/left 箭头键？这是 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

试试这个：我只是删除了填充。您还可以添加 padding 只需添加更多 height

解释：

字体大小和textarea的高度相同加上你有一个填充。

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">Prefilled</textarea>

Answer 2

您希望高度包括内边距和边框大小，因为您使用了 box-sizing，所以您的高度应该是字体的大小加上顶部和底部的内边距和边框

在这种情况下是 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 3

请检查更新的。向 rows=1 添加了 line-height 和更新的属性，而不是为 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 4

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

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 5

我想是因为你添加了padding/margin。通过删除 padding/margin 来尝试运行，看看是否适合您。

Answer 6

像

一样调整字体大小和填充

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

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

HTML textarea shows dynamic text half the height

html

css

textarea