inline element as CB
1. padding box 2. 第一个字符确定最上边 3. 最后一个字符确定最下边 4. 如果第一个字符和最后一个字符在X轴上交错,那么第一个字符确定最左边,最后一个字符确定最右边 5. 如果第一个字符和最后一个字符在X轴上不交错,那么第一个字符同时确定最左边和最右边 6. IE7 下没有上面不交错的判断,都是第一个字符确定最左边,最后一个字符确定最右边
by Three Tree
HTML
<div>
<span>阿道夫即可快速的风格是的风格建立快速的风格是的</span>
<span>阿道夫即可快速的风格是的风格建立快速的风格是的</span>
<span class="con" style="padding: 0 10px;">阿道夫即可<em class="lt">left-top</em><em class="lb">left-bottom</em><em class="rt">right-top</em><em class="rb">right-bottom</em>快速的风</span>
<span>阿道夫即可快速的风格是的风格建立快速的风格是的</span>
<span>阿道夫即可快速的风格是的风格建立快速的风格是的</span>
<span>阿道夫即可快速的风格是地方豆腐干</span>
<span class="con">阿道夫即可格是的风格阿道夫即可快速的风<em class="lt">left-top</em><em class="lb">left-bottom</em><em class="rt">right-top</em><em class="rb">right-bottom</em>格是的风格建立快速的风格是的风格是的风格立刻就能是的风格是东风科技是的风格是法国双方的歌双方的科技双方的歌是是的风格是的风格阿道夫即可快速的风格是的风格建立快速的风格是的风格是的风格立刻就能是的风格是东风科技是的风格是法国双方的歌双方的高科技是的风格会计师发电公司的风格是的风格双卡交火技术的风格;世界发达国家是购房能力和是的风格会计师的风格家后is的风格是东风科技双方的歌是是的风格是的风格</span>
<span>11111111111111111111111111111111111111</span>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span class="con">阿道夫即的歌是是的风格是的风格阿道夫即可快速的风<em class="lt">left-top</em><em class="lb">left-bottom</em><em class="rt">right-top</em><em class="rb">right-bottom</em>格是的风格建立快速的风格是的风格是的风格立刻就能是的风格是东风科技是的风格是法撒风格家后is的风格是东风科技双方的歌是是的风格是的风格阿道夫即可快速的风格是的风格建立快速的风格是的风格是的风格立刻就能是的风格是东风科技是的风格是法国双方的歌双方的高科技是的风格会计师发电公司的风格是的风格双卡交火技术的风格;世界发达国家是购房能力和是的风格会计师的风格家风格家撒风格家后is的风格是东风科技双方的歌是是的风格是的风格</span>
<span>阿道夫即可快速的风格是的风格建立快速的风格是的</span>
<span>阿道夫即可快速的风格是的风格建立快速的风格是的</span>
<span>阿道夫即可快速的风格是的风格建立快速的风格是的</span>
<span>阿道夫即可快速的风格是的风格建立快速的风格是的</span>
</div>
CSS
div {
width: 321px;
}
span {
position: relative;
}
span.con {
background: yellow;
}
em {
position: absolute;
background: red;
white-space: nowrap;
color: blue;
}
em.lt {
top: 10px;
left: 0;
}
em.lb {
left: 0;
bottom: 10px;
}
em.rt {
top: 10px;
right: 0;
}
em.rb {
bottom: 10px;
right: 0;
}