overflow - 容器滑动时隐藏文本

Question

为什么我的文本不在“文本溢出：省略号”中？我希望我的文本直接在省略号中，并且在容器滑动时隐藏多余的文本。您可以在附件中找到我的代码。谢谢你的帮助。

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>

标签： overflowhiddenellipsis

Answer 1

您不能position: absolute在这种情况下使用，因为它<div> 不再占用任何空间。您可以使用float例如：

.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>

弹性盒解决方案：

.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>