CSS - 用::之前的内容划分内嵌块跨度元素： - 允许跨度换行 - 在新行开始时移除分隔线

问题描述

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

代码：

CSS：

  $ c>在一个额外的包装。然后使用 text-indent 取消第一行的保证金。
 
 
 
最好使用分隔符知道确切的宽度（例如填充+边框）而不是文本，宽度可变。这样你可以通过负边距减去分隔符的确切宽度。
 code>取消内联块项目之间的空白。）
 
 
 
  
 
 
 
 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  - 用::之前的内容划分内嵌块跨度元素： - 允许跨度换行 - 在新行开始时移除分隔线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！