跨度多线从同一位置开始

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/

Answer 2

您可以像这样使用显示内联块..

摆脱那个边界跨度......你不需要它。

Fiddle

HTML：

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

的CSS：

span              { display:inline-block; vertical-align:top;}
span:nth-child(1) { border-right:1px solid #c9caca; padding:0 8px 0 0; margin:0 8px 0 0; font:normal 13px arial;}
span:nth-child(2) { width:calc(100% - 103px);}

**注意：我从计算第一个跨度的总宽度（宽度+填充+边框+边距）得到103px。如果你事先不知道宽度，你可以在一定程度上使用百分比..到将绝对流动性效应降低到非常窄的宽度，在这种情况下，上面的答案（显示：表格）可能更合适。