从同一位置开始跨度多行

问题描述

我有这样的html代码:

i have html code like this :

<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行从第1行的同一位置开始.

means line 2 in span start from position same line one .

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

this is my css code but not work :

.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;
}

推荐答案

例如，您可以使用 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/

这篇关于从同一位置开始跨度多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！