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

Question

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

14

以下是两种解决方案：一个使用纯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>

- Sergey Telshevsky

标记语言长什么样？比如，链接是如何格式化的，容器又是如何格式化的？ - Jason

我认为你需要决定在JavaScript中放置换行符并剥离|。 - Jason

@Blankasaurus：添加了标记，容器是一个简单的块，可以是任何你想要的，只需保持多行要求。如何在JavaScript中找到格式化行的开头和结尾？ - Sergey Telshevsky

这位SO用户有一个类似的问题。被接受的解决方案是一个检测行折叠的jQuery插件。我认为它可以为您的目的进行调整。https://dev59.com/Xm445IYBdhLWcg3w1tqi - mrtsherman

@mrtsherman：这是我将要研究的问题，但目前我还看不出如何从行首剪切元素，并且对齐是否按预期工作。 - Sergey Telshevsky

3个回答

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

- noob

这是一个很棒的解决方案！将分隔符标记化并没有问题，因为代码可以按照您的意愿生成。如果它是一张图片，那么就不需要进行标记了！ - Sergey Telshevsky

0

尝试这个：

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

- Indranil

这个不适合作为行，因为它们被分隔成了<div>标签，要求是我有一个foreach循环中从数据库中获取的原始超链接字符串，并且它们具有不同的宽度。 - Sergey Telshevsky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wesley Murch · Accepted Answer

这里有一个想法：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 */  
}