html - CSS - 在内容之前使用::划分内联 block 跨度元素: - 允许跨度换行 - 删除新行开头的分隔符

Question

我想列出除以管道的信息位，这很容易。但如果设备的宽度很窄，我希望将信息位包装到多行上。我可以使用 table ，但它会占用宝贵的空间..

代码:http://jsfiddle.net/Z4NeK/4/

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 没有选项可以执行此操作。