2010-12-02 5 views
10

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

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

Отсутствие неуважения к JamWaffles, но серьезно, как ответ, который (изначально) неверен и даже не приближается к решению, получает как одобренное, так и 5 upvotes?! Sheesh ... – 2010-12-04 15:32:50

ответ

11

EDIT:. К сожалению, это только изменяет слова интервала, не письма разноса Существует не способ сделать кернинг в CSS Возможно CSS3, однако

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

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

оправдание позаботится о разнесении слов, а не пробел между буквами – ArK 2010-12-02 11:02:20

+1

Ooops! Приношу свои извинения. Я немного поспешил с ответом> slap < – Bojangles 2010-12-02 11:04:31

6

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

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

-2

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

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

Смежные вопросы