HTML: one row of <textarea> is of how much height?

Question

I want to know the height of one row of <textarea>. I want to know that because I want to do some calculations.

Do we know it or do we have to do some scripting?

Unction

If you just want to know the number of rows there are, just split by \r\n \r \n respectively. – Phlox

Answer 1

The height of a row is set by line-height.

For example:

<textarea rows="1">hello world</textarea>

If you set the following:

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

By inspecting the textarea element you'll find out that it has a height of 12px.

Alage

Answer 2

Basically it is the same as whatever the line-height is set to. You can either set it explicitly, or figure out what it is set to, and go from there.

Here is an example

Egestion

Answer 3

You could also determine the value of line-height (or any style) by using currentStyle or getComputedStyle, as per this answer for getting the line-height of a div:

https://mcmap.net/q/371326/-javascript-find-div-39-s-line-height-not-css-property-but-actual-line-height

And if you have jQuery you can use .css(), which abstracts the above (there are browser differences to consider).

Lancers