CSS - 用::之前的内容划分内嵌块跨度元素： - 允许跨度换行 - 在新行开始时移除分隔线 [英] CSS - divide inline-block span elements with ::before content: - allow spans to wrap - remove divider at start of new line

问题描述

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

代码： 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查看代码。

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

非常感谢，

〜Rik

margin-left 与 overflow：hidden >解决方案 $ c>在一个额外的包装。然后使用 text-indent 取消第一行的保证金。

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

code>取消内联块项目之间的空白。）

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

HTML：

 < div class =outer> 
< div class =inner> 
< span class =item>第一项< / span> 
< span class =item>第二项< / span> 
< span class =item>第三项< / span> 
< span class =item>第四项< / span> 
< span class =item>第五项< / 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; 
} 
  

I want to list bits of info divided by pipes, which is easy. But I would like the bits of info to wrap onto multiple lines if the width of the device is slim. I could use a table, but it would take up precious space..

Code: http://jsfiddle.net/Z4NeK/4/

CSS:

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

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

The text within each span does not wrap, as desired. The spans wrap correctly when the screen is slim. All good!

BUT.. The start of each subsequent line has a divider on it, when the dividers should only be shown between each span.

The | divider is shown only before each span that is preceded by another span, but that's the best I can do. I cannot find a way to select the first element on a line, no matter how many lines the items end up being wrapped to.

I hope that makes sense! Check out the jsfiddle to see the code in action.

I'd really appreciate your input. Any ideas? Is this possible?

Many thanks,

~Rik

解决方案

You can use a negative margin-left combined with overflow: hidden in an extra wrapper. Then use text-indent to cancel the margin on the first line.

It's best to use a separator that you know the exact width of (e.g. padding+border) rather than text, which will have variable width. This way you can subtract the exact width of the separator via a negative margin.

(Also note the use of font-size: 0 to cancel out the whitespace between inline-block items.)

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 - 用::之前的内容划分内嵌块跨度元素： - 允许跨度换行 - 在新行开始时移除分隔线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！