Question

我想列出按管道划分的信息位，这很容易。但是如果设备的宽度很小，我希望将信息包裹在多行上。我可以使用一张桌子，但它会占用宝贵的空间..

CSS：

span.course-item-details { 
  white-space: pre;
  display: inline-block;
}

p.course-item-meta span~span::before { 
  content: "| ";
}

根据需要，每个范围内的文本不会换行。屏幕很细时，跨距正确包裹。一切都好！

但是......每个后续行的开头都有一个分频器，当分频器只在每个跨度之间显示时。

|分隔符仅在每个跨度之前显示，前面是另一个跨度，但这是我能做的最好的。我无法找到一种方法来选择一行中的第一个元素，无论这些项最终被包裹多少行。

我希望这是有道理的！查看jsfiddle以查看实际代码。

我非常感谢您的意见。有任何想法吗？这可能吗？

非常感谢，

〜里克多维

Answer 1

你可以使用::after向后转，所以这个独立管只是除了最后一行之外的行的末尾：的 TEST

span.course-item-details { white-space: pre; display: inline-block; } p.course-item-meta span::after { content: "| "; } p.course-item-meta span:last-of-type::after { content: ""; }

关于如何选择行的开头或结尾的问题部分，CSS没有选项来执行此操作。

Answer 2

您可以在额外的包装中使用与margin-left结合的否定overflow: hidden。然后使用text-indent取消第一行的边距。

最好使用一个分隔符，你知道它的确切宽度（例如填充+边框）而不是文本，它将具有可变宽度。这样，您可以通过负边距减去分隔符的确切宽度。

（另请注意使用font-size: 0取消内联块项目之间的空格。）

http://jsfiddle.net/Z4NeK/6/

HTML：

<div class="outer">
    <div class="inner">
        <span class="item">Item one</span>
        <span class="item">Item two</span>
        <span class="item">Item three</span>
        <span class="item">Item four</span>
        <span class="item">Item five</span>
    </div>
</div>

CSS：

.outer {
    text-indent: 5px;
    overflow: hidden;
}

.inner {
    margin-left: -5px;
    font-size: 0;
}

.item {
    text-indent: 0;
    font-size: 1rem;
    padding-left: 4px;
    padding-right: 4px;
    border-left: 1px solid #000;
    display: inline-block;
    white-space: nowrap;
}

.item:first-child {
    padding-left: 0;
    border-left: none;
}

.item:last-child {
    padding-right: 0;
}

CSS - 使用:: before content划分inline-block span元素： - 允许spans换行 - 在新行的开头删除divider

2 个答案: