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

Question

I want to specify the width of textareas in terms of the maximum numbers of monospace characters they should be able to hold in each line with neither excess le

Answer 1

The col attribute gives accurate results, but the width is somewhat larger than needed for the characters, since there is room for vertical scroll bar on the right (or left, depending on directionality). You can see this by entering a few more lines in the area.

You can remove the room for scroll bar by removing scrollability, using overflow: hidden.

An alternative to set the width in ch units, but browser support is more limited.

textarea {
    resize:none;
    background-color:lightgray;
    padding:0;
    font-family: monospace;
}
.fix {
    overflow: hidden;
}
.w18 {
    width: 18ch;
}

123456789012345678
See what happens when vertical scrolling is needed:

123456789012345678
123
123
Fixed by removing space for scroll bar:

123456789012345678
Fixed by setting width in `ch` units:

123456789012345678

As the demo shows, overflow: hidden also removes the space for a horizontal scroll bar. Browsers generally leave such a space, so that the area seems to have one row more than the value of rows, even though browsers normally do not show a horizontal scroll bar as they used to (they visually break lines instead). Using overflow-y: hidden instead keeps that space

You need to consider what the removal of scroll bars implies in terms of usability. If the intent is to show the user the maximum allowed line length, maybe you can do that by forcing a scroll bar instead of removing it.

123456789012345678