样式化空文本区域高度

Question

我正在尝试将 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;

感谢您的帮助！

编辑：这是未应用最小高度和填充的同一元素。

Answer 1

文本区域的行高由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

大多数浏览器将文本区域的默认行设置为 2 行，您可以在此处看到：https://www.w3.org/wiki/HTML/Elements/textarea。

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

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

样式化空文本区域高度

Styling empty textarea height

html

css

textarea

input