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

时间：2019-04-19 14:48:28

标签： html css css-transitions

我在某些文本中将from itertools import groupby from operator import itemgetter def mapResearchSubTypeToResolutionCodesToSchema(qryResult): groupByRschSubTypeDict = {} grouper = itemgetter("rsch_sub_typ_cd","resl_cd") for key, grp in groupby(qryResult, grouper): key_dict = dict(zip(["rsch_sub_typ_cd","resl_cd"], key)) rschSubTyp = key_dict["rsch_sub_typ_cd"] reslSubTypCds = [] for itm in grp: reslSubTypCds.append(itm["sub_resl_cd"]) resolutionType = { "resolutionCode": key_dict["resl_cd"], "resolutionSubTypeCodes": reslSubTypCds } # Add to resolutionTypes list if already there, or create new one researchSubTypeCode_resolutionTypes = groupByRschSubTypeDict.get(rschSubTyp) if not researchSubTypeCode_resolutionTypes: researchSubTypeCode_resolutionTypes = [] groupByRschSubTypeDict[rschSubTyp] = researchSubTypeCode_resolutionTypes researchSubTypeCode_resolutionTypes.append(resolutionType) finalResult = _transformToFinalSchema(groupByRschSubTypeDict) return finalResult def _transformToFinalSchema(groupByRschSubTypeDict): researchSubTypeToResolutionCodesList = [] for k,v in groupByRschSubTypeDict.items(): newItem = { "researchSubTypeCode": k, "resolutionTypes": v } researchSubTypeToResolutionCodesList.append(newItem) finalResult = { "researchSubTypeToResolutionCodes": researchSubTypeToResolutionCodesList } return finalResult if __name__ == '__main__': TEST_QRY_DATA = [ {"rsch_sub_typ_cd": None, "resl_cd": 999991, "sub_resl_cd": 99992}, {"rsch_sub_typ_cd": None, "resl_cd": 999991, "sub_resl_cd": 99993}, {"rsch_sub_typ_cd": None, "resl_cd": 999995, "sub_resl_cd": 99996}, {"rsch_sub_typ_cd": 33533, "resl_cd": 33726, "sub_resl_cd": 33730}, {"rsch_sub_typ_cd": 33533, "resl_cd": 33726, "sub_resl_cd": 33731}, {"rsch_sub_typ_cd": 33533, "resl_cd": 33726, "sub_resl_cd": 33732}, {"rsch_sub_typ_cd": 33533, "resl_cd": 33726, "sub_resl_cd": 33774}, {"rsch_sub_typ_cd": 33533, "resl_cd": 33727, "sub_resl_cd": 33730}, {"rsch_sub_typ_cd": 33533, "resl_cd": 33727, "sub_resl_cd": 33731}, {"rsch_sub_typ_cd": 33534, "resl_cd": 33726, "sub_resl_cd": 33730} ] result = mapResearchSubTypeToResolutionCodesToSchema(TEST_QRY_DATA) print(result) 设置为white-space: nowrap，并且当用户悬停时，应将空白值更改为正常值。悬停代码可以正常工作，但是我无法进行过渡。

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

text-overflow: ellipsis
.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;
}

7 个答案:

答案 0 :(得分：1)

我认为您不能仅使用CSS设置动画。要设置高度的动画，您需要明确设置它。我会尝试使用js获取实际高度，限制高度，然后将js的高度应用于悬停。

答案 1 :(得分：1)

CodePen example you can check

您需要将col-sm-6 col-md-4 col-lg-3的宽度固定为“ 100％”，这样您才能获得答案

<div class="container App">
    <div class="row bg-row">
      <div class="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>

应用此CSS，它将为您工作

.App {
  p {
    margin-bottom: 3px;
  }
  .bg-row {
    box-shadow: 0px 0px 5px #bdc3c7;
    background-color: #ecf0f1a3;
    padding: 20px;
    border-radius: 5px;
    .repositorios {
      transition: all 0.2s ease;
      margin-bottom: 20px;
      &:hover {
        .repo-content {
          background-color: #d2d6d8;
          transition: 500ms ease-in-out;
        }
      }
      .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;
      }
      .repo-content {
        padding: 10px;
        transition: 500ms ease-in-out;
        overflow: hidden;
        box-shadow: 0px 0px 5px #bdc3c7;
        transition: 300ms ease-in-out;
        background-color: #ecf0f1;
        p {
          white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 200px;
        }
        .read-more {
          transition: 500ms ease-in-out;
          cursor: pointer;
          &:hover {
            white-space: normal;
    transition: 300ms ease-in-out;
    width: 100%;
          }
        }
      }
    }
  }
}

答案 2 :(得分：1)

或者您可以像下面的codepen

那样使用Jquery进行操作 

$('.repo-content').hover(function(e){
  $(this).animate({height: '100%'}, 100);
  $('.bg-row.row').animate({height: '100%'}, 500);
},function(){
  $(this).animate({height: '50px'}, 500);
});
.App p {
  
	 margin-bottom: 3px;
}
 .App .bg-row {
   transition: 500ms ease-in-out;
	 box-shadow: 0px 0px 5px #bdc3c7;
	 background-color: #ecf0f1 a3;
	 padding: 20px;
   z-index:99;
   height:100px;
	 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;
	 overflow: hidden;
   height:50px;
	 box-shadow: 0px 0px 5px #bdc3c7;
	 background-color: #ecf0f1;
}
 .App .bg-row .repositorios .repo-content p {
	 text-overflow: ellipsis;
	 overflow: hidden;
 
}
 .App .bg-row .repositorios .repo-content .read-more {
	 transition: 500ms ease-in-out;
	 cursor: pointer;
   z-index:99;
}
 .App .bg-row .repositorios .repo-content .read-more:hover {
	 
	 transition: 500ms ease-in-out;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

顺便说一句，我不认识scss，所以我将您的scss转换为css，对此我表示歉意。

答案 3 :(得分：1)

问题是因为white-space不是可设置动画的属性。您可以为max-height属性设置动画-请参见updated codepen和相关摘录：

 .read-more {
      transition: 500ms ease-in-out;
      cursor: pointer;
      max-height: 2em; /* added */
      &:hover {
        white-space: normal;
        max-height: 100vh; /* added */
        transition: 500ms ease-in-out;
      }
    }

但是当hover处于 off 状态时，返回动画将不起作用，因为white-space: nowrap会破坏它。

这是一个 hacky 解决方案，仅使用max-height进行 transition ，省略号由处理伪元素-请参见下面的codepen和摘要：

.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 {
  margin-bottom: 20px;
}
.App .bg-row .repositorios:hover .repo-content {
  background-color: #d2d6d8;
}
.App .bg-row .repositorios:hover .repo-content .read-more {
  transition: all 500ms ease-in-out;
  white-space: normal;
  max-height: 100vh;
}
.App .bg-row .repositorios:hover .repo-content .read-more:after {
  transition: all 0.5s linear;
  opacity: 0;
}
.App .bg-row .repositorios .repo-image {
  width: 100%;
  height: auto;
  box-shadow: 0px 0px 5px #bdc3c7;
}
.App .bg-row .repositorios .repo-content {
  padding: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 5px #bdc3c7;
  background-color: #ecf0f1;
}
.App .bg-row .repositorios .repo-content p {
  overflow: hidden;
}
.App .bg-row .repositorios .repo-content .read-more {
  transition: all 500ms ease-in-out;
  text-align: justify;
  display: flex;
  cursor: pointer;
  max-height: 1.7em;
  /* added */
}
.App .bg-row .repositorios .repo-content .read-more:after {
  transition: all 0.5s linear;
  content: '...';
  opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

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

答案 4 :(得分：1)

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

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

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

使用CSS实现此目的的唯一方法是对元素使用max-height，并在悬停时进行过渡。但是，空格/省略号本身必须去=>用与父级具有相同backgroundColor的伪元素替换它们：

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

答案 5 :(得分：1)

这可以通过height: auto来实现，但是 CSS transition需要高度固定值。但是您可以使用jQuery解决此问题。我只是编写了一个基本的mouseenter，mouseleave方法和一些用于使内容扩展/折叠高度的逻辑。所有提到的更改都应用于以下代码，您也可以查看工作中的小提琴。希望对您有帮助。谢谢

  

工作小提琴示例- https://jsfiddle.net/creative_sid5/bgpus3q6/42/ 

var rm = $('.read-more');   
var rmInitialHeight = 0;
var rmExpandedHeight = rm.outerHeight() + 'px';
rm.removeClass('active');
setTimeout(function(){
  rmInitialHeight = rm.outerHeight() + 'px';
  rm.height(rmInitialHeight);
}, 500)
rm.mouseenter(function() {	    		
  toggle(rmExpandedHeight);
});
rm.mouseleave(function() {	    		
  toggle(rmInitialHeight);
})  

function toggle(h) {
  rm.toggleClass('active').css('height', h);
}
.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 .read-more {
        transition: 500ms ease-in-out;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
      .App .bg-row .repositorios .repo-content .active {
        white-space: normal; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<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 active">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>

答案 6 :(得分：0)

我这里有一个使用React和CSS的示例，但是您可以在普通JS或您选择的框架中实现相同的效果。 这里的关键是测量元素的扩展（隐藏，克隆一个）高度和折叠高度，然后通过CSS过渡处理动画。

import React, { useState } from "react";

const ShowMore = ({ text }) => {
  const [isOpen, toggle] = useState(false);
  const [
    isOnGoingCollapseTransition,
    setisOnGoingCollapseTransition
  ] = useState(false);
  const [initialHeight, setInitialHeight] = useState(0);
  const ref = React.useRef();
  const measureRef = React.useRef();
  React.useLayoutEffect(() => {
    setInitialHeight(ref.current.getBoundingClientRect().height);
  }, []);
  const onTransitionEnd = () => {
    if (isOpen) {
      setisOnGoingCollapseTransition(true);
    } else {
      setisOnGoingCollapseTransition(false);
    }
  };
  return (
    <div className="relative">
      <div className="absolute hidden" ref={measureRef}>
        {text}
      </div>
      <div
        onTransitionEnd={onTransitionEnd}
        className="overflow-hidden transition"
        style={{
          height: isOpen
            ? measureRef.current.getBoundingClientRect().height
            : initialHeight
        }}
      >
        <div
          ref={ref}
          className={
            !isOpen && !isOnGoingCollapseTransition ? "overflow-ellipsis" : ""
          }
        >
          {text}
        </div>
      </div>
      <span className="text-blue" onClick={() => toggle(open => !open)}>
        {isOpen ? <span>show less</span> : <span>show more</span>}
      </span>
    </div>
  );
};

export default ShowMore;

CSS：

    .relative{
      position: relative;
    }
    .absolute{
      position: absolute;
    }
    .overflow-ellipsis{
      white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .overflow-hidden{
      overflow: hidden;
    }
    .text-blue{
      color: blue;
      cursor: pointer;
    }
    .transition{
      transition: 225ms height linear;
    }
    .hidden{
      transform: translate(1000px);
    }

查看此工作示例Ellipsis collapse transition

相关问题
最新问题