跨度多来自相同的位置

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行从同一行o的位置开始ne。

这是我的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

您可以使用显示inline-block的这样的..

摆脱边框跨度也..你不需要它。

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从计算的整体宽度（宽度+填充+边框+缘）第一跨度。如果事先不知道宽度，可以在一定程度上使用百分比..以获得绝对流动性效果，使其下降到非常窄的宽度，在这种情况下，上面的答案（dis玩：表）可能更合适。