sIFR переместить слово в две строки? - PullRequest
1 голос
/ 23 августа 2009

У кого-нибудь есть объяснение этому? Я попытался установить ширину на #menu_wrapper ul li безрезультатно.

http://i31.tinypic.com/2vskbqu.png

Ответы [ 3 ]

1 голос
/ 23 августа 2009
Ширина

sIFR ограничена шириной заменяемого элемента. Если этот элемент является плавающим, то ширина является фактической шириной текста HTML. Если шрифт Flash шире шрифта HTML, это означает, что текст Flash не помещается на разрешенной ширине и разбивается на несколько строк.

Возможные решения:

  • Укажите letter-spacing для элементов списка, чтобы текст HTML был таким же широким, как текст Flash
  • Установите для параметра forceSingleLine для sIFR.replace() значение true, с тем недостатком, что фильмы Flash будут показывать горизонтальное изменение размера при инициализации
  • Объедините два решения для повышения производительности инициализации и безопасности, которую текст никогда не разделит
1 голос
/ 23 августа 2009

sIFR вычисляет размеры элемента, к которому вы его применяете. Плавающие элементы сжимаются и занимают только ширину, необходимую для отображения текста внутри.

Я предлагаю вам дать идентификатор каждому из этих списков, что-то вроде

li#nav-blog { width:200px; }

Это даст вам более точный контроль над тем, сколько места занимает каждый из этих элементов навигационного списка, и больше места для использования sIFR.

0 голосов
/ 13 апреля 2011

Мое решение:

sIFR.replace(gothic, {
   wmode: 'transparent',
   forceSingleLine: true,
   selector: '.quick-access li h2 a',
   css: [
        '.sIFR-root { background-color: transparent; font-size:24px;  color: #abaaab; text-align: center; cursor: pointer;}',
        'a {background-color: transparent; font-size:24px;  color: #abaaab; text-decoration:none; text-align: center; cursor: pointer;}',
        'a:hover {background-color: transparent; font-size:24px;  color: #77b100; text-decoration:none; text-align: center; cursor: pointer;}'
        ],
});

И CSS:

h2 {
    font-size: 18px;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.35;
    margin: 0 0 5px;
}

*{
    margin: 0;
    padding: 0;
}
...