CODEWITHSUNDEEP
htmlcss
user2613399
user2613399

Reputation: 785

overflow of text in a div

This is the 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 be hidden and the visible text  must be in single line <span class="divider"> 2 </span> </h2> </div>
    <div class="clear"></div>
</div>

I need to hide the overflow text, and the text visible must be rendered in a single line. Can someone please help me out? If I'm using overflow:hidden the pointed part is disappearing.

Upvotes: 1

Views: 105

Answers (2)

vee
vee

Reputation: 38645

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

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

Here is the jsfiddle.

Update:

To include the vertical separator and 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 is the updated fiddle.

Upvotes: 3

RbG
RbG

Reputation: 3213

try using text-overflow:ellipsis; it will put ... when overflow occurs or you may try text-overflow:clip; it will hide the overflowed text..in both cases texts are shown in a single line if your text in html is a single line(i.e. without <br />)

Upvotes: 0

Related Questions