隐藏行开始和结束文本分隔符

Question

下面有两个解决方案:一个是纯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>

Answer 1

我有个想法:http://jsfiddle.net/WyeSz/
^{(注意jsfiddle演示使用了CSS重置，你可能需要更多的CSS来重置列表样式，等等)}

基本上，你在列表项上设置border-left，然后将整个列表放置在具有overflow:hidden的容器中-1px，这将切断左侧边框。

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

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

Answer 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内容。