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

Answer 2

是的，你可以这样做，但你需要将|放在标签中。 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;
});

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

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

3 个答案: