two solutions below: one with pure css, the second with jQuery, allowing any kind of symbol/image to be a separator

pre: Fairly hard to formulate and find such questions/solutions so I am sorry if duplicating.

I have a multi-line, justified block with random(not entirely) text hyperlink elements (tags/categories/etc) without fixed width separated by "|" symbol and spaces around. Looks pretty much like a tag cloud but with a fixed font-weight, size and other formatting, can contain more than one word in a hyperlink element. The problem rises when a separator is placed just before the end of the line or at the beginning of the line, actually, it happens always one way or another as I set nowrap to link elements, so this looks really ugly. Seeking for a solution to remove separators in the beginning and end of the lines.

For better understanding I will try to draw an example here.

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

Something like that, of course, with justification and much more lines in a row. And another drawing of what I want to achieve.

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

So fixed number of elements in a line is not an option, fixed width is also not an option.

The only solution I came up with is to set font to monospace and to count symbols and print pragmatically line-by-line with server-side scripting, the downside, of course, is the monospace fonts. Seeking for a better solution like pure html/css (would be perfect), JavaScript/jQuery formatting after output.

Thank you in advance!

EDIT: answering to a comment below, markup can be anything you wish, basically something like:

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

two solutions below: one with pure css, the second with jQuery, allowing any kind of symbol/image to be a separator

pre: Fairly hard to formulate and find such questions/solutions so I am sorry if duplicating.

I have a multi-line, justified block with random(not entirely) text hyperlink elements (tags/categories/etc) without fixed width separated by "|" symbol and spaces around. Looks pretty much like a tag cloud but with a fixed font-weight, size and other formatting, can contain more than one word in a hyperlink element. The problem rises when a separator is placed just before the end of the line or at the beginning of the line, actually, it happens always one way or another as I set nowrap to link elements, so this looks really ugly. Seeking for a solution to remove separators in the beginning and end of the lines.

For better understanding I will try to draw an example here.

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

Something like that, of course, with justification and much more lines in a row. And another drawing of what I want to achieve.

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

So fixed number of elements in a line is not an option, fixed width is also not an option.

The only solution I came up with is to set font to monospace and to count symbols and print pragmatically line-by-line with server-side scripting, the downside, of course, is the monospace fonts. Seeking for a better solution like pure html/css (would be perfect), JavaScript/jQuery formatting after output.

Thank you in advance!

EDIT: answering to a comment below, markup can be anything you wish, basically something like:

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

• javascript
• jquery
• html
• css

• Whats the markup look like? Like, how are the links formatted and how is the container they sit in formatted ? – Jason Commented Dec 16, 2011 at 19:31
• I think you will have to decide where to put the line breaks in javascript and strip out the |. – Jason Commented Dec 16, 2011 at 19:32
• @Blankasaurus: added markup, the container is a simple block, can be anything you wish, just keep the multi-line requirement. How do I find the formatted line beginnings and ends in JavaScript? – Sergey Telshevsky Commented Dec 16, 2011 at 19:36
• This SO person had a similar question. The accepted solution is a jQuery plugin that detects when lines wrap. I think it could be adapted for your purposes. stackoverflow.com/questions/4671713/… – mrtsherman Commented Dec 16, 2011 at 19:41
• @mrtsherman: this is something I will look into, but as for now I can't see how to cut the elements from the beginning of the lines and if the justification will be working as intended. – Sergey Telshevsky Commented Dec 16, 2011 at 20:15

3 Answers 3

Here's an idea: http://jsfiddle.net/WyeSz/
^{(note that the jsfiddle demo uses a CSS reset, you may need a little more CSS than this to reset list styles, etc.)}

Basically, you set border-left on the list items, then position the entire list -1px to the left within a container that has overflow:hidden, which cuts off the left borders.

<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 */  
}

Yes you can do this but you need to put the | in a tag. Look at this example

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;
});

Try this:

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>

This way, your content separator can be any HTML content.