隐藏行开头和结尾文本分隔符

Question

下面有两个解决方案:一个使用纯css,第二个使用jQuery,允许任何类型的符号/图像作为分隔符

前:相当难以制定和找到这样的问题/解决方案,所以如果重复,我很抱歉.

我有一个多行,对齐的块与随机(不完全)文本超链接元素(标签/类别/等)没有固定宽度由"|"分隔 符号和空间.看起来非常像标签云,但具有固定的字体 - 重量,大小和其他格式,可以在超链接元素中包含多个单词.当分隔符放置在行尾或行的开头之前,问题就会出现,实际上,它总是以某种方式发生,因为我将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在列表项上设置,然后将整个列表-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 */  
}