Скрыть строки и разделители текста текста

два решения ниже: один с чистым css, второй с jQuery, позволяющий любому типу/изображению быть разделителем

pre: Сложно сформулировать и найти такие вопросы/решения, поэтому я сожалею, если дублирую.

У меня есть многострочный, обоснованный блок со случайными (не полностью) текстовыми гиперссылками (теги/категории/и т.д.) без фиксированной ширины, разделенные символом "|" символ и пробелы вокруг. Выглядит очень похоже на облако тегов, но с фиксированным размером шрифта, размером и другим форматированием может содержать более одного слова в элементе гиперссылки. Проблема возникает, когда разделитель помещается непосредственно перед концом строки или в начале строки, на самом деле это происходит всегда так или иначе, когда я устанавливаю nowrap для ссылки на элементы, поэтому это выглядит действительно уродливо. Поиск решения для удаления разделителей в начале и конце строк.

Для лучшего понимания я попытаюсь привести пример здесь.

C++ | PHP | CSS | ASP |
JavaScript | jQuery
| HTML 5 | StackOverflow

Что-то вроде этого, конечно, с обоснованием и гораздо большим количеством строк подряд. И еще один рисунок того, чего я хочу достичь.

C++ | PHP | CSS | ASP
JavaScript | jQuery
HTML 5 | StackOverflow

Так что фиксированное количество элементов в строке не является опцией, фиксированная ширина также не является опцией.

Единственное решение, с которым я столкнулся, заключается в том, чтобы установить шрифт в моноширину и подсчитать символы и печатать прагматично по очереди с серверными сценариями, конечно же, недостатком является моноширинный шрифт. Поиск лучшего решения, такого как чистый html/css (будет идеально), форматирование JavaScript/jQuery после вывода.

Заранее благодарю вас!

РЕДАКТИРОВАТЬ: ответ на комментарий ниже, разметка может быть любой, что вы пожелаете, в основном что-то вроде:

<div><a href="#">tag 1</a> | <a href="#">tag 2</a> | <a href="#">tag 3</a></div>

Ответ 1

Вот идея: http://jsfiddle.net/WyeSz/
^{(обратите внимание, что демон jsfiddle использует CSS reset, вам может понадобиться немного больше CSS, чем это, в стили стилей reset и т.д.)}

В основном, вы устанавливаете border-left в элементах списка, затем размещаете весь список -1px слева в контейнере с overflow:hidden, который отключает левые границы.

<div>
    <ul>
        <li>C++</li>
        <li>PHP</li>
        <li>CSS</li>
        <li>ASP</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>HTML 5</li>
        <li>StackOverflow</li>
    </ul>
</div>

ul {
    width:200px;  
    margin-left:-1px;/* hide the left borders */
}
li {
    float:left;   
    padding:2px 10px;
    border-left:1px solid #000;
}
div {
   overflow:hidden;/* hide the left borders */  
}

Ответ 2

Да, вы можете это сделать, но вам нужно поместить | в тег. Посмотрите на этот пример

HTML:

<div id="tags">
    <a href="#">C++</a>
    <span>|</span>
    <a href="#">PHP</a>
    <span>|</span>
    <a href="#">ASP</a>
    <span>|</span>
    <a href="#">JavaScript</a>
    <span>|</span>
    <a href="#">jQuery</a>
    <span>|</span>
    <a href="#">HTML 5</a>
    <span>|</span>
    <a href="#">StackOverflow</a>
</div>

CSS

#tags {
    width: 170px;
}
#tags a {
    white-space: nowrap;
}

JavaScript (jQuery):

var iTop;
$("#tags a").each(function() {
    if (iTop < $(this).offset().top) {
        $(this).prev("span").remove();
    }
    iTop = $(this).offset().top;
});

Ответ 3

Попробуйте следующее:

JQuery

$('document').ready(function() {
    $('div').find('a').not(':last-child').after(' | ');
});

HTML:

<div><a href="#">tag 1</a><a href="#">tag 2</a><a href="#">tag 3</a></div>
<div><a href="#">tag 1</a><a href="#">tag 2</a><a href="#">tag 3</a></div>
<div><a href="#">tag 1</a><a href="#">tag 2</a><a href="#">tag 3</a></div>

Таким образом, ваш разделитель содержимого может быть любым содержимым HTML.