css单词空格自动换行

CSS卡片折叠动画效果是一种非常流行的动画效果，它通过CSS实现了折叠的效果，以吸引用户的眼球。下面将介绍如何利用CSS实现这种动画效果。

.accordion {
   display: flex;
   flex-direction: column;
   width: 100%;
}
.accordion-item {
   display: block;
   position: relative;
   margin-bottom: 1rem;
   border: 1px solid #ccc;
   border-radius: 4px;
   overflow: hidden;
}
.accordion-item button {
   display: block;
   width: 100%;
   padding: 1rem;
   font-size: 1.2rem;
   text-align: left;
   border: none;
   background-color: transparent;
   cursor: pointer;
}
.accordion-item button:focus {
   outline: none;
}
.accordion-item .content {
   padding: 1rem;
   color: #333;
   font-size: 1.1rem;
   line-height: 1.5;
   background-color: #fafafa;
   transition: max-height 0.5s ease;
   max-height: 0;
   overflow: hidden;
}
.accordion-item.active .content {
   max-height: 100vh;
}
.accordion-item.active button::after {
   content: '\2212';
}

上面的代码实现了一个基本的CSS卡片折叠动画效果。其中，容器(.accordion)的display属性设置为flex，使得子元素(.accordion-item)能够纵向排列。每个子元素都是一个卡片，其中包含一个按钮(button)和一个内容区域(content)。点击按钮时，内容区域会展开，展开时实现了卡片折叠动画效果。

需要注意的是，内容区域的max-height属性一定要设置为一个足够大的值，比如100vh，否则无法实现卡片折叠动画效果。