html - 跨多行从同一位置开始

Question

我有这样的html代码:

<span style="color:#c9caca">Scope of Work</span><span class="ga_sep"></span><span>Idea Processing, Photography, Magazine Advertising, Idea Processing, Photography, Magazine, Advertising, Idea Processing, Photography, Magazine Advertising</span>

结果是

但我想要这个:

表示跨度中的第 2 行从同一行的位置开始。

这是我的 CSS 代码，但不起作用:

.ga_sep{
    height:10px;
    width:1px;
    border-left:1px solid #c9caca;
    display:inline-block;
    margin:1px 8px 0 8px;
    position: relative;
    top:1px;
    display:inline;
}

Answer 1

例如，您可以使用 display: table 值。

<style>
.ga_sep{
    height:10px;
    width:1px;
    border-left:1px solid #c9caca;
    margin:1px 8px 0 8px;
    position: relative;
    top:1px;
    display:inline;
}
div {display: table}
span {display: table-cell}
span:first-child {white-space: nowrap}
</style>

<div>
    <span style="color:#c9caca">Scope of Work</span>
    <span class="ga_sep"></span>
    <span>Idea Processing, Photography, Magazine Advertising, Idea Processing, Photography, Magazine, Advertising, Idea Processing, Photography, Magazine Advertising</span>
</div>

http://jsfiddle.net/f7hhx5qe/1/