How to Set Width of <Div> to Fit Constant Number of Letters in Monospace Font

How to set width of div to fit constant number of letters in monospace font?

em does work in this case, if you know the proper ratios involved with your font. Try the following HTML:

(The danger with this is that some browsers adjust the font, which can alter the width/height of the font. For 100% accuracy, you might have to go with JavaScript.)

<style type="text/css">
    #text-container {
        border: #f00 solid 1px;
        font: 10px/1.2 Courier, monospace;
        width: 48em;  /* 80 x 0.6 (the width/height ratio of Courier) */
        height: 30em; /* 25 x 1.2 (line-height is 1.2) */
        overflow: hidden;
    }
</style>

<div id="text-container">
00000000001111111111222222222233333333334444444444555555555566666666667777777777
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>

How to calculate number of characters of monospace font that fit into div

My solution that works was using getBoundingClientRect to get real float width of one character and then just use width of the container divided by width of the character:

function get_char_size(div) {
    var temp = $('<span> </span>').appendTo(div);
    var rect = temp.find('span')[0].getBoundingClientRect();
    var result = {
        width: rect.width,
        height: rect.height
    };
    temp.remove();
    return result;
}
function get_num_chars(div, char_size) {
    var width = div.width();
    return Math.floor(width / char_size.width);
}

var container = $('.container');
var size = get_char_size(container);
var chars_per_line = get_num_chars(container, size);

there are two functions because if you don't change font size you can calculate char size only once and second function can use each time you resize the container.

Use CSS to set the monospace font size based on the width of each character

Here is a JavaScript solution that starts out with 20px font size but then scales it proportionally to exactly fit into the desired 200px width.

var xyzzy = document.getElementById('xyzzy');var currentWidth = xyzzy.clientWidth+1;var desiredWidth = 200;var currentFontSize = 20;xyzzy.style.fontSize = currentFontSize * desiredWidth / currentWidth + "px";

#xyzzy {  display: inline-block;  white-space: nowrap;  padding: 0;  margin: 10px;  border: 10px solid black;  font-family: monospace;  font-size: 20px;}

<div id=xyzzy>1234567890</div>

Specify width in *characters*

1em is the height of an M, rather than the width. Same holds for ex, which is the height of an x. More generally speaking, these are the heights of uppercase and lowercase letters.

Width is a totally different issue....

Change your example above to

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

and you will notice width and height of the span are different. For a font-size of 20px on Chrome the span is 12x22 px, where 20px is the height of the font, and 2px are for line height.

Now since em and ex are of no use here, a possible strategy for a CSS-only solution would be to

1. Create an element containing just a  
2. Let it autosize itself
3. Place your div within and
4. Make it 10 times as large as the surrounding element.

I however did not manage to code this up. I also doubt it really is possible.

The same logic could however be implemented in Javascript. I'm using ubiquitous jQuery here:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span> </span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html> 

The +1 in (w * 10 + 1) is to handle rounding problems.

How to set character width in html/css

You are looking for a monospace font...

Here are some examples: https://fonts.google.com/?category=Monospace

It's possible to get/set the width of a character?

I don't think you can use parseInt() for this matter, at least not at first.
You first need to divide the numbers as a float (parseFloat()) and then you can round the result, but if you round it using parseInt first you'll have a precision problem.

Also, pay attention to the element's default padding, which can affect your calculations.

How can i ensure the paragraph have fixed number of characters with CSS?

Yes you can achieve what you're after using the code below

p.texts { overflow: hidden; max-width: 9ch; }

<p class='texts'>ninechars</p>

---

Related Topics