hide line beginning and end text separators

Question

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>

Whats the markup look like? Like, how are the links formatted and how is the container they sit in formatted ? — Jason, Dec 16 '11 at 19:31
I think you will have to decide where to put the line breaks in javascript and strip out the |. — Jason, Dec 16 '11 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, Dec 16 '11 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. http://stackoverflow.com/questions/4671713/detecting-line-breaks-with-jquery — mrtsherman, Dec 16 '11 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, Dec 16 '11 at 20:15

score 14 · Accepted Answer · answered Dec 16 '11 at 19:37

14

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

answered Dec 16 '11 at 19:37

Wesley Murch

101,186
37
194
228

That's a great solution I thought about, but is there any other solution that would work if the separators were something different, than the "|" characters, which can be "faked" by borders? – Sergey Telshevsky Dec 16 '11 at 19:40
@Vlakarados: You might be able to use the same technique with `:before` content, for example: http://jsfiddle.net/WyeSz/1/ - demo's a little shaky (I'm "guessing" the width of the delimiter, needs better alignment) but you can probably fine tune it to work in your environment. – Wesley Murch Dec 16 '11 at 19:45
Great, haven't thought about width that is the same as the separator :) Looks like this is the answer, will mark it, if no other solutions come up :) – Sergey Telshevsky Dec 16 '11 at 19:52
@Vlakarados: It's a workaround for sure, but I understand what you're trying to do exactly and I don't think CSS has a real tool for this *yet*, although I'm not completely up to snuff on what can be done with CSS3. At the least you will have good browser support with this. Since you have this tagged jQuery, there may be other solutions using it. – Wesley Murch Dec 16 '11 at 19:54
Yes, any solution will work that meets the requirements, actually, I found a problem with justification. See how your block looks justified, and mine (below): http://jsfiddle.net/WyeSz/3/ I think that's because of the margins. – Sergey Telshevsky Dec 16 '11 at 20:02
If you remove the width specification, and then resize the window, this works perfectly, exactly what I was looking for. – insaner Sep 02 '17 at 19:43

score 2 · Answer 2 · answered Dec 17 '11 at 10:15

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

That's a fantastic solution! There is no problem in tagging a separator as the code can be generated as you wish. And if it is an image, then there's no need to tag it! — Sergey Telshevsky, Dec 17 '11 at 14:02

score 0 · Answer 3 · answered Dec 16 '11 at 19:43

0

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.

answered Dec 16 '11 at 19:43

Indranil

2,451
1
23
31

this won't fit as the line's are separated as
tags, the requirement is I have raw hyperlink strings in foreach loop gathered from the database with different widths
– Sergey Telshevsky Dec 16 '11 at 19:50

hide line beginning and end text separators

3 Answers3

Linked

Related