造型空textarea高度

Question

我正在尝试将textarea放入我的布局中。但是，当它只有占位符时为空时，似乎添加了一个额外的行。我希望摆脱它，因为它打破了我的布局。我无法设置固定高度，因为textarea是流动的，具体取决于文本输入。

这是截图。

以下是Safari中显示的所有规则（我省略了那些未激活的规则）。

CSS：

min-height: 36px;
padding: 16px;
margin-right: 16px;
box-sizing: border-box;
font-size: 14px;
max-height: 100px;
overflow: hidden;
resize: none;
width: 80%
-webkit-appearance: textarea;
background-color: white;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: initial;
border-right-color: initial;
border-bottom-color: initial;
border-left-color: initial;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0em;
font-style: normal;
font-weight: 400;
font-family: -apple-system;
font-variant: normal;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-writing-mode: horizontal-tb !important;
list-style: none;

感谢您的帮助！

编辑：这是没有应用min-height和padding的相同元素。

Answer 1

textarea中行的高度由line-height设置。

例如：

<textarea rows="1">Text text</textarea>

如果您设置以下内容：

textarea { font-size: 16px; border: none; margin: 0; padding: 0; line-height: 1; }

通过检查textarea元素，您会发现它的高度为16px。

Answer 2

大多数浏览器将textarea的默认行设置为2行，如您所见：https://www.w3.org/wiki/HTML/Elements/textarea。

没有css属性可以修改textarea中的行数。

如果你确实需要1行，你可以做的是设置rows ='1'，然后使用javascript在用户输入时动态添加更多行。你可以在这里找到一个例子：add new row to textarea input while editing