问题描述
我是新来的,我尝试制作一张没有 JS 的支票卡,但是当它对于带点的卡片来说太长时我不想缩小菜的名称,但我只能让它成为 div 不'我不想变小,而我的动画 div 保持小...
我想让我的动画 div 向右推,并用点隐藏菜的额外名称..
我用以下代码制作了一个代码笔:https://codepen.io/steven-fabre/pen/NWbowdO
提前感谢,你将成为我的英雄!
input {
display: none;
}
.dish-card {
display: flex;
background: white;
border-radius: 20px;
height: 70px;
width: 337.5px;
margin-bottom: 13px;
background: red;
}
.add-dish {
display: flex;
position: initial;
top: initial;
left: initial;
width: 100%;
}
.add-dish span {
font-size: 14px;
font-weight: bold;
padding-bottom: 15px;
align-self: flex-end;
margin-right: 30px;
}
.dish-card-description {
display: flex;
align-items: center;
padding: 0 0 0 10px;
width: 100%;
max-width: 315px;
justify-content: space-between;
}
.dish-name {
display: flex;
flex-direction: column;
flex-shrink: 3;
padding: 3px;
max-width: 100%;
min-width: 50px;
align-self: center;
flex-wrap: wrap;
white-space: Nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dish-name h2 {
font-size: 18px;
flex-wrap: wrap;
margin: 0;
}
.dish-name p {
font-size: 17px;
flex-wrap: wrap;
margin: 0;
}
.dish-check {
display: flex;
Box-sizing: content-Box;
border-radius: 0 20px 20px 0;
width: 0;
margin-left: 10px;
justify-content: center;
align-items: center;
transition: linear 0.2s;
}
.fa-check {
visibility: hidden;
font-size: 13px;
background-color: green;
border-radius: 50px;
padding: 3px;
color: red;
}
input:checked~.dish-name {
width: 170px !important;
background-color: yellow;
transition: linear 0.2s;
}
input:checked~.dish-check {
width: 70px;
transform: scale(1);
background-color: pink;
transition: linear 0.2s;
}
input:checked~.dish-check .fa-check {
animation: visibility 0.5s forwards 0.2s;
}
@keyframes visibility {
from {
transform: rotate(-180deg);
}
to {
visibility: visible;
transform: rotate(0);
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<div class="dish-card">
<label class="add-dish">
<input type="checkBox">
<div class="dish-card-description">
<div class="dish-name">
<h2>Coquilles Saint-Jacques</h2>
<p>Accompagnées d'une purée de panais</p>
</div>
<span>40€</span>
</div>
<div class="dish-check">
<i class="fas fa-check"></i>
</div>
</label>
</div>
解决方法
我不太明白你说的动画是什么意思。
但是,省略号应该很容易,但请确保遵循以下规则: CSS text-overflow: ellipsis; not working?
这是我最终得到的结果
或
通过添加此 scss:
.dish-card {
.dish-name h2{
height: 18px;
width: 100px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
}
编辑
我假设这就是您想要的:
但您也希望省略号是动态的..
我不会向您提供完整的解决方案,但您需要执行以下操作:
每当单击复选框时,使用 javascript 以像素为单位调整文本的宽度。
代码如下:
.dish-card {
position: relative;
.dish-name p{
height: 18px;
width: 250px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
}
input{
appearance: none;
&:before {
position: absolute;
display: block;
content: '';
opacity: 0;
border-radius: 20px;
height: 70px;
width: 337.5px;
top: 0;
left: 0;
}
}
删除input {display: none;}