Specify Width in *Characters*

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

Create an element containing just a
Let it autosize itself
Place your div within and
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 width base on characters

Not sure about CSS solution but,

You can do such thing using JavaScript, but it's not very convenient.

Demo here: https://jsbin.com/fecevopara/1/edit?html,css,js,console,output

Try to change text in html to see how width changes.

const container = document.getElementById('container')
const textLength = container.innerText.length
if (textLength > 10) {  container.style.width = '50px'}if (textLength > 20) {  container.style.width = '100px'}

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body>  <div id="container" style="display: inline-block; width: 10px; background: #ccc">   Some text goes hereeeee  </div></body></html>

How to set width of a text character fixed in any device with CSS & HTML

Finally I realized that mobile browsers adding some extra letter spacing to increase readability of text. So In my case that's the reason why I'm getting different widths of text which are in same font size only in mobile devises.(I mean mobile devises as Smart Phones) So I add some JavaScript code which decreases line spacing only in mobile devises. My problem solved. It worked as I expected.

<script>
        if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
            document.documentElement.style.letterSpacing = "-1px";
        }
</script>

Thank all who trying to help me

Specify width of 3 chars for an html input text

Not reliably, since l and W have very different widths.

However, if you set the font to monospace, that helps. Then, you should be able to set size="3" on the input element, and in theory it should be exactly three characters wide.

how to set a specific pixel or character width limit for a text in css

You can do this by giving you set-width class the following properties:

display: inline-block;
width: 100px;
text-align: center;

The combination of the above properties will make the browser threat the element as a box that flows with the text like a button or image, the browser will then make it exact 100px large, and center the text using the text-align attribute.

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

How to adjust textbox width based on input that has fixed number of characters but font size may vary?

You can use ch unit. 1ch is approximately equal to the width of 1 character. Since you know the length of the input value is going to be 11 characters, you can set the width of it to be 11ch.

So when you get the response from the server, you can set the width to be 11ch. Although you could make it 12ch and make it look a tad bit better (or you could add padding to the input)

#code {
    width: 11ch;
}

The accepted answer to this question gives a great explanation of the difference between ch and em. Something you may want to consider.

set width of characters with java

Use a HashMap to assign an i-relative width to every letter. Then, as you get the message, iterate over every letter, and accumulate values for the consecutive letters from the HashMap.

Example:

Map<Character,Double> map = new HashMap<Character,Double>();
map.put('a', 3.0);
map.put('b', 2.1);
// ... and so on

String msg = ... // get the message
Double width = 0.0;

for (Character c : msg.toCharArray())
    width += map.get(c);

Set html TD width to number of characters

The simplest solution i can imagine is that:

table tr td+td+td {
  font-size: 100%;
  font-family: monospace;
  width: 8em;
}

http://jsbin.com/elaleg/1/edit

Specify Width in Characters