Как спрятать разделитель горизонтального UL, находящийся на конце строки?

Question

[zencd]

Есть горизонтальный (inline) список UL, элементы которого разделены буллитами. Список длинный и разнесён на несколько строк.

Как сделать чтобы не отображались те буллиты что находятся на конце строки?

Хорошо:

Rainbow • Television • Interpol • The Shins
Whitesnake • The Killers • 16 Horsepower

Плохо:

Rainbow • Television • Interpol • The Shins •
Whitesnake • The Killers • 16 Horsepower

Совместимость: современные браузеры.

Comments

[aen]

Строка может меняться по ширине?

[personaljs]

можно пример?

Answer 1

[aen]

Есть один финт, правда грязный. Для каждого элемента списка в псевдоэлемент :before засуньте буллит. Ваша макет будет выглядеть как то так:

• Rainbow • Television • Interpol • The Shins
• Whitesnake • The Killers • 16 Horsepower

Далее контейнер со списком с помощью отрицательного margin-left сместите влево на такое количество пикселей, чтобы буллиты первых слов в строке скрывались под внешним контейнером.

Comments

[aen]

Появилось время, накидал пример jsbin.com/axOKEheT/1

Answer 2

[Алексей]

Если есть возможность как-то предсказать число элементов в строке, можно воспользоваться псевдоклассом :nth-child в совокупности с :after или :before. Например, правила ниже добавят буллит после каждого элемента, кроме каждого четвёртого.

.some-element:after{
   content:'•';
}
.some-element:nth-child(4n+4):after{
   content:'';
}

Answer 3

[Руслан Касымов]

Может такой вариант?
для теста изменяйте width у .wrap

HTML:

<div class="wrap">
    <ul>
        <li>Rainbow</li>
        <li>Television</li>
        <li>Interpol</li>
        <li>The Shins</li>
        <li>Whitesnake</li>
        <li>The Killers</li>
        <li>16 Horsepower</li>
    </ul>
</div>

CSS:

.wrap {
    width: 300px;
    overflow: hidden;
}
.wrap ul {
    margin: 0 0 0 -25px;
    padding: 0;
}
.wrap ul > li {
    margin-left: 25px;
    white-space: nowrap;
    float: left;
}

Comments

[aen]

это то, что я и предложил, разве что только буллиты на маркеры списка заменили

[aen]

Забыл дописать: как вы в этом случае собираетесь регулировать расстояние между словами и маркером?

[Руслан Касымов]

согласен тоже самое решение Вы и описали. Расстояние в данном случае не регулируется, хотя и в Вашем случае с :before не обойтись при отрицательном отступе без магического числа. Так как ширина контента зависит от шрифтовых значений.

[Руслан Касымов]

не самый красивый способ но рабочий и без магических чисел, это в li запихать • и дать ему скажем 20px ширины и сделать выравнивание текста внутри span по центру. А у ul сделать левый отступ в те же 20px только с знаком -

[Руслан Касымов]

парсер съел тег span по тексту должно быть - ...в li запихать [span]•[/span] и дать ему...

Answer 4

[dllstar]

jsfiddle.net/BrjDf/1

Comments

[Руслан Касымов]

а что Вы изминили то? магическое число "margin-left:-47px;" так и осталось