CSS, заполните всю ширину div текстом

Как автоматически изменить пробел между буквами. Я хочу, чтобы текст занимал всю ширину div. Текст не является статичным. (Всегда меняя текст, может быть 123 "или" текстовый текст "...)

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

Ответ 1

РЕДАКТИРОВАТЬ: К сожалению, это только меняет расстояние между словами, а не интервал между буквами. В CSS нет способа сделать кернинг. Возможно, CSS3.

Это легко выполнить с помощью атрибута text-align: justify CSS:

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

Ответ 2

Нет никакого способа сделать это чисто с CSS. Атрибут letter-spacing не принимает процентные значения. text-align: justify не будет работать либо потому, что он влияет только на пространство между словами, а не на кернинг шрифта, и он также применяется только к тем строкам текста, за которыми следуют другие строки.

Вы можете попробовать использовать JS для этого, подсчитав количество символов в конкретном div, а затем вычислить необходимое пространство между символами, чтобы оно заполнило ширину, но это решение будет работать только с моно- (шрифты с одинаковой шириной для всех символов).

Ответ 3

Здесь решение не будет работать для всех, но оказалось, что для меня проблема: если вы показываете короткий текст заголовка, вы можете поместить пробел между каждым символом каждого слова "L ikethis".

Для моей конкретной конструкции это выглядит хорошо, и, конечно, он позволяет align: justify полностью выполнять свою магию в div.