CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dorvalla
Dorvalla

Reputation: 5240

Pushing complete span down when element is overflowing

I am having the following code

<div class="col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2 relative">
    <div id="contactinfo" class="text-white">
        <span>client name</span> – 
        <span><a href="mail@something" class="text-green">mail@something</a></span> – 
        <span>01 23456789</span>
    </div>
</div>

When I resize my screen to a certain point, the phonenumber (since its now displayed all next to each other) i'd like to, when my the phonenumber is broken up, to a new line. Right now, whenever it wont fit anymore, it will move only the 23456789 part because thats what technically overflows, but I want the whole element to move down, so it wont break the appearance of the phonenumber. Is this possible?

This is a bootply of it. http://www.bootply.com/RFVcvXGRmP

Upvotes: 1

Views: 678

Answers (3)

DavidDomain
DavidDomain

Reputation: 15293

If you do not want to change the initial display value for the <span> element you can use the white-space rule with nowrap. This is actually what it was made for.

white-space

The white-space property is used to describe how whitespace inside the element is handled.

nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

#contactinfo span:nth-child(3) { 
    white-space:nowrap; 
}

I know that there is already an accepted answer, just adding this for the record.

Upvotes: 3

Amit Kumar
Amit Kumar

Reputation: 1

Instead of 3 span you need to take only two span like
<div class="col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2 relative">
    <div id="contactinfo" class="text-white">
        <span>client name</span> – 

        <span><a href="mail@something" class="text-green">mail@something</a>-01 23456789</span>
    </div>
</div>

and one changes in css
<style>
  #contactinfo span{display:inline-block;}
 </style>

Upvotes: -1

Nutshell
Nutshell

Reputation: 8537

Use display: inline-block on this span :

See it here

Upvotes: 3

Related Questions