CODEWITHSUNDEEP
htmlcss
lolalola
lolalola

Reputation: 3823

CSS, fill all div width with text

How to automatically change the space between the letters.I want the text to take up the entire width of the div. Text is not static. (Always changing text, can be 123" or "text text"...)

  <style type="text/css">
    #menu{
      width: 200px;
      background-color: #000;
      color: #336699;
      font-size: 16px;
      letter-spacing: 100%;
    }
  </style>
<body>
<div id="menu">
  tekstas
</div>

Upvotes: 11

Views: 23395

Answers (4)

Daniel Souza
Daniel Souza

Reputation: 19

If you have for example 1 word per row and want to have them justified, as it is not possible to use letter-space you can use a monospaced font-family such as Roboto_Mono so you will reach the desired result.

Upvotes: 0

Bojangles
Bojangles

Reputation: 101473

EDIT: Unfortunately this only changes word spacing, not letter spacing. There is not way to do kerning in CSS. Possibly CSS3, however.

This is easily accomplished with the text-align: justify CSS attribute:

#menu 
{ 
      width: 200px; 
      background-color: #000; 
      color: #336699; 
      font-size: 16px; 
      text-align: justify; 
}

Upvotes: 11

Marc Eliot Stein
Marc Eliot Stein

Reputation: 355

Here's a solution will not work for everyone, but it turned out to solve the problem for me: if you are displaying a short amount of headline text, you can put a space between every character of every word "L i k e t h i s".

For my particular design, this happens to look fine, and of course it allows align: justify to fully do its magic within the div.

Upvotes: -2

Valentin Flachsel
Valentin Flachsel

Reputation: 10825

There is no way of doing this purely with CSS. The letter-spacing attribute doesn't take percent values. text-align: justify won't work either because it only affects the space between words, not the font kerning and it also only applies to those rows of text that are followed by another row.

You could try using JS to do this by counting the number of characters in a particular div and then calculate the needed space between the characters so it would fill out the width, but this solution would only work right with mono-spaced fonts (fonts that have the same width for all the characters).

Upvotes: 6

Related Questions