Hide a text when the container slides

Question

Why is my text not in "Text overflow: ellipsis"? I want my text to be directly in ellipsis and the excess text to be hidden when the containers slide. You can find my code attached. Thank you for help.

http://jsfiddle.net/5gLtraxh/12/

.wrapper {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 100px; 
    border: 1px solid black;  
    }
.description{ overflow:hidden;
  text-overflow: ellipsis;
}
.description2{
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.price{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 100%;
    background: green;
    transition: 1s;
}
.slide {
    position: absolute;
    right: -100px;
    bottom: 0;
    width: 100px;
    height: 100%;
    background: blue;
    transition: 1s;
}
.wrapper:hover .slide {
    transition: 1s;
    right: 0;
}
.wrapper:hover .price {
    transition: 1s;
    right: 100px;
}

<div class="wrapper">
   <h4 class="description">Lorem ipsum dolor sit amet, consectetur</h4>
   <p class="description2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae nulla
   </p>
   <span class="price"></span>
   <div class="slide"></div>
</div>

Answer 1

You cannot use position: absolute in this case since it will make the <div> no longer takes up any space. You can position them with float for example:

.wrapper {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 100px; 
    border: 1px solid black;  
}

.description
{
  white-space: nowrap; /*I am guessing you want this*/
  overflow:hidden;
  text-overflow: ellipsis;
}

.description2
{
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.price
{
    float: right;
    width: 100px;
    height: 100%;
    background: green;
    transition: 1s;
}

.slide {
    float: right;
    width: 0px;
    height: 100%;
    background: blue;
    transition: 1s;
}

.wrapper:hover .slide {
    transition: 1s;
    width: 100px;
}

.wrapper:hover .price {
    transition: 1s;
    right: 100px;
}

<div class="wrapper">
   <div class="slide"></div>
   <span class="price"></span>
   <h4 class="description">Lorem ipsum dolor sit amet, consectetur</h4>
   <p class="description2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae nulla nihil fugit debitis assumenda reiciendis ab velit cupiditate blanditiis perspiciatis hic itaque reprehenderit, enim officia iusto, sint quod modi architecto!
   </p>
</div>

Flexbox solution:

.wrapper {
    display: flex;
    overflow: hidden;
    width: 400px;
    height: 100px; 
    border: 1px solid black;  
    justify-content: space-between;
}

.description-wrapper {
  min-width: 0;
}

.slider-wrapper {
  display: flex;
}

.description
{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.description2
{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.price
{
    flex-shrink: 0;
    width: 100px;
    height: 100%;
    background: green;
    transition: 1s;
}

.slide {
    flex-shrink: 0;
    width: 0px;
    height: 100%;
    background: blue;
    transition: 1s;
}

.wrapper:hover .slide {
    transition: 1s;
    width: 100px;
}

.wrapper:hover .price {
    transition: 1s;
}

<div class="wrapper">
   <div class="description-wrapper">
     <h4 class="description">Lorem ipsum</h4>
     <p class="description2">
    Lorem ipsum dolor sit amet</p>
   </div>
   <div class="slider-wrapper">
     <span class="price">sd</span>
     <div class="slide"></div>
   </div>
</div>