时间戳

首页 > 解决方案 > CSS 过渡不适用于空白：nowrap 和文本溢出：悬停时省略号

html - CSS 过渡不适用于空白：nowrap 和文本溢出：悬停时省略号

问题描述

我在一些文本中设置了一个white-space: nowrapwith text-overflow: ellipsis，当用户悬停时，它应该将空白值更改为正常值。悬停代码工作正常，但我无法使转换工作。

这是 CodePen 链接：https ://codepen.io/anon/pen/qwYoyR

.App p {
  margin-bottom: 3px;
}
.App .bg-row {
  box-shadow: 0px 0px 5px #bdc3c7;
  background-color: #ecf0f1a3;
  padding: 20px;
  border-radius: 5px;
}
.App .bg-row .repositorios {
  transition: all 0.2s ease;
  margin-bottom: 20px;
}
.App .bg-row .repositorios:hover .repo-content {
  background-color: #d2d6d8;
  transition: 500ms ease-in-out;
}
.App .bg-row .repositorios .repo-image {
  width: 100%;
  height: auto;
  box-shadow: 0px 0px 5px #bdc3c7;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}
.App .bg-row .repositorios .repo-content {
  padding: 10px;
  transition: 500ms ease-in-out;
  overflow: hidden;
  box-shadow: 0px 0px 5px #bdc3c7;
  transition: 500ms ease-in-out;
  background-color: #ecf0f1;
}
.App .bg-row .repositorios .repo-content p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.App .bg-row .repositorios .repo-content .read-more {
  transition: 500ms ease-in-out;
  cursor: pointer;
}
.App .bg-row .repositorios .repo-content .read-more:hover {
  white-space: normal;
  transition: 500ms ease-in-out;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container App">
  <div class="row bg-row">
    <div class="col-sm-6 col-md-4 col-lg-3 repositorios">
      <div class="repo-content">
        <p class="read-more">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      </div>
    </div>
  </div>
</div>

标签： htmlcsscss-transitions

解决方案

这些不是可以转换的属性。

white-space: nowrap;
text-overflow: ellipsis;

为了从一个属性过渡到另一个属性，CSS 需要中间值。从 nowrap 到 normal 没有中间值，因为从 heright: 0 到 auto 或从 display: none 到 block 没有中间值。

使用 CSS 实现此目的的唯一方法是为您的元素使用 max-height，并在悬停时对其进行转换。然而，空白/省略号本身必须去=>用与父级具有相同背景颜色的伪元素替换它们：

.x {
    position: relative;
    overflow: hidden;

    max-height: 20px;                /* set this to the height your first row would be */
    background-color: red;           /* you can change this, ofc */
    transition: max-height .5s;      /* the duration of the transition */
}
.x:after {
    content: '...';
    position: absolute;
    top: 0; right: 0;

    height: 1.5em;                   /* positioning it in line with the text - hacky */
    padding: 0 .2em;
    background-color: red;           /* keep the same as parent - it cannot be transparent unfortunately */

    opacity: 1;
    transition: opacity 0s .5s;      /* will delay the appearance of the '...' until the expanding transition has finished */
}
.x:hover {
    max-height: 1000px;              /* can be lower to create smoother response time */
}
.x:hover::after {
    opacity: 0;
    transition: opacity 0s 0s;       /* will apply the appearance of the '...' when hovered */
}

哈克，可改进，但只使用 CSS。

推荐阅读