<div class="box">
<div class="box__more">
<div class="box__btn">еще</div>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing modi ea iste. Dignissimos accusamus qui incidunt pariatur reiciendis architecto itaque quos, natus iusto molestiae cum error voluptate delectus placeat modi ea iste?
</div>
<div class="box">
<div class="box__more">
<div class="box__btn">Показать еще</div>
</div>
item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item
</div>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
gap: 30px;
box-sizing: border-box;
padding: 40px;
}
.box {
line-height: 30px;
font-size: 20px;
max-width: 500px;
height: 90px;
overflow: hidden;
// animation: box 15s ease infinite;
display: box;
box-orient: vertical;
line-clamp: 3;
}
@keyframes box {
0% {
max-width: 500px;
}
50% {
max-width: 280px;
}
100% {
max-width: 500px;
}
}
.box__more {
float: right;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
shape-outside: inset(calc(100% - 30px) 0 0 0);
margin-left: 20px;
}
.box__btn {
box-sizing: border-box;
padding: 0 5px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
background-color: orange;
cursor: pointer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.