CODEWITHSUNDEEP
css
Evanss
Evanss

Reputation: 23593

Stop text from wrapping onto multiple lines as its containing div shrinks?

Im trying to show and hide a div containing text and an image with an animation that shrinks everything down to nothing. Ive got it working fairly well except I dont like the way the text wraps onto multiple lines as its containing div shrinks before its hidden. Is it possible to stop the text from doing this so it stays on one line?

http://codepen.io/anon/pen/FoJzx

<p class="open">Open</p>
<p class="close">Closed</p>

<div class="one">
    <img src="http://img.wallpaperstock.net:81/maggie-grace-portrait-wallpapers_14105_1600x1200.jpg" />    
    <p>Here is some text for div 1</p>
</div>

.one {
    transition: all 0.5s ease;
    width: 400px;
  background: grey;
}
.hide {
    width: 1px;
}
img {
    max-width: 100%;
    height: auto;
}
p {
  overflow: hidden;
}
$('.close').click(function(){
    $('.one').addClass('hide');
});
$('.open').click(function(){
    $('.one').removeClass('hide');
});

Upvotes: 4

Views: 7040

Answers (3)

Evanss
Evanss

Reputation: 23593

Actually pretty easy! 

p {
   height: 1em;
}

Note, the overflow is already set to hidden.

Upvotes: 0

thgaskell
thgaskell

Reputation: 13226

You could set the width of the p element and specify the the overflow-x to be hidden on the wrapper.

Note: This allows your text to be longer than 1 line.

http://codepen.io/thgaskell/pen/gDcpy

CSS

.one {
  /* ... */
  overflow-x: hidden;
}

p {
  width: 400px;
}

Upvotes: 0

matewka
matewka

Reputation: 10148

white-space is your friend. Add it to your p tag style

p {
    overflow: hidden;
    white-space: nowrap;
}

It will simply prevent the text inside the p from breaking into new line.

Updated codepen: http://codepen.io/anon/pen/Kyzpl

Upvotes: 10

Related Questions