html - overflow of text in a div -

this fiddle i'm working with:
http://jsfiddle.net/hdyks/1/

the html is:

<div class="body">      <div class="variation1 font700 green"> <h2> 1 <span class="divider">sample arrow </span> </h2>  </div>     <div class="clear"></div>      <div class="variation2 font700 green2 "> <h2> overflown text must hidden , visible text  must in single line <span class="divider"> 2 </span> </h2> </div>     <div class="clear"></div> </div> 

i need hide overflow text, , text visible must rendered in single line. can please me out? if i'm using overflow:hidden pointed part disappearing.

add white-space: nowrap; constrain text layout, i.e. restrict text wrapping next line. add overflow hidden hide text appearing outside variation2.

.variation2 h2 {     white-space:nowrap;     overflow:hidden;     padding-left: 0.2%; } 

here jsfiddle.

update:

to include vertical separator , number in variation2.

.variation2 h2 {     background-color:inherit;     white-space:nowrap;     overflow:hidden;     padding-left: 0.2%; }  .variation2 h2 span{     background-color:inherit;     position:absolute;     right:0; } 

and here updated fiddle.