容器滑动时隐藏文本

Question

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

.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

在这种情况下您不能使用 position: absolute，因为它会使 <div> 不再占用任何 space。您可以使用 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>

Flexbox 解决方案：

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

Answer 2

您好，当我折叠文本时，我注意到代码没有按预期工作。项目不再位于包装的末尾。正如您在下面的代码中看到的那样。

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

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

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

<div class="wrapper">
   <div class="description-wrapper">
     <h4 class="description">Lorem ipsuctetur</h4>
     <p class="description2">
    Lorem ipsum dolor sit ame</p>
   </div>
   <span class="price">33$</span>
   <div class="slide"></div>
</div>

容器滑动时隐藏文本

Hide a text when the container slides

overflow

hidden

ellipsis