CSS, fill all div width with text_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-29 00:19 出处：网络

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. (Al开发者_开发百科ways changing text, can be 123\" or \"text text\

相关专题：css

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. (Al开发者_开发百科ways 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>

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; 
}

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).

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.