Geek Answers Handbook

How to fix textarea width in number of characters? (cols attribute DOES NOT work)

I want to indicate the width of the text areas in terms of the maximum numbers of monospaced characters that they should be able to keep in each line without any extra remaining space or overflow.

There are several similar questions like this, but the consensus answer, namely using an attribute cols, obviously does not work, as shown in this jsFiddle . HTML for this:

<textarea cols="1"  rows="2">1</textarea><br/>
<textarea cols="10" rows="2">1234567890</textarea><br/>
<textarea cols="20" rows="2">12345678901234567890</textarea><br/>
<textarea cols="40" rows="2">1234567890123456789012345678901234567890</textarea><br/>
<textarea cols="80" rows="2">12345678901234567890123456789012345678901234567890123456789012345678901234567890</textarea><br/>

The actual width is always substantially greater than the required width. (In Safari, at least the excess seems to remain constant regardless of the value specified cols, however with Chrome this excess increases as the value increases cols.)

I also tried using the CSS property widthwith emand ex. The latter results in fields that are several characters narrower than required, while the first result is even wider than those that are the result of the attribute cols.

Finally, I examined the width setting in units of ex, as a number obtained by multiplying the number of characters by some coefficient of invention. This is not only disgusting (we should not do work with the browser), but also not a cross browser: the factors that I found for Chrome and Safari (for example) are significantly different (1.333 versus 1.415).

Do you have a professional way 1 ?

1 that is. cross browser, no guesswork, no hacking, documented, thoughtful, etc.

+6
2

col , , , ( , ). , .

, , overflow: hidden.

ch , .

textarea {
    resize:none;
    background-color:lightgray;
    padding:0;
    font-family: monospace;
}
.fix {
    overflow: hidden;
}
.w18 {
    width: 18ch;
}
<textarea cols="18" rows="2">123456789012345678</textarea>
<p>See what happens when vertical scrolling is needed:<br>
<textarea cols="18" rows="2">123456789012345678
123
123</textarea>
<p>Fixed by removing space for scroll bar:<br>
<textarea cols="18" rows="2" class="fix">123456789012345678</textarea>
<p>Fixed by setting width in 'ch' units:<br>
<textarea cols="18" rows="2" class="w18">123456789012345678</textarea>
Hide result

, overflow: hidden . , , , , rows, , ( ). overflow-y: hidden

, . , , , .

<textarea cols="18" rows="2" style="overflow-y: scroll; overflow-x: hidden; resize: none">123456789012345678</textarea>
Hide result

+6

, , textarea,

textarea {
    font-family: Courier;
}

em ex. . codepen.

" " , ( ), , , , . , , .

Chrome:

Firefox:

Safari:

, , , .

0

More articles:


All Articles