2

I am trying to set a specific set of character or pixel width limit in a html line.

I have javascript that pulls in a word from a array to populate the second word in a line depending on the region of the country the page is loaded from - but if the sting is longer, the line wraps and sometime it does not.

The code is like

<p> Hello <span class="set-width"> $WORD-FROM-JS </span>, how are you ? </p>

example 

<p> Hello <span class="set-width"> Germany</span>, how are you ? </p>

how to configure "set-width" to be 100px or 10 characters so the length of the text is same - like; 

Hello Germany, How are you ?
Hello   USA  , How are you ?
Hello  India , How are you ?
Hello  Korea , How are you ?
Hello Afghans, How are you ?

thanks

hypermails
  • 726
  • 1
  • 10
  • 28
  • 2
    Possible duplicate of [Specify width in \*characters\*](http://stackoverflow.com/questions/8186457/specify-width-in-characters) – Ferrybig Dec 30 '15 at 18:17

1 Answers1

3

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.

Ferrybig
  • 18,194
  • 6
  • 57
  • 79
  • Is there a way to character based width ? like 10 characters ? I was searching online - and saw a few examples of px based width.. my javascript is not quite working - so asking about charactars – hypermails Dec 30 '15 at 18:15
  • not with just css and html there's not. you didn't put javascript in the tags. this does exactly what you asked for. – I wrestled a bear once. Dec 30 '15 at 18:16
  • I had the same idea. You were faster. This is fiddle of the complete snippet: https://jsfiddle.net/eu7n7f0a/ @hypermails – Mark Dec 30 '15 at 18:17