I am trying to do this:
Specifically, that the text ends in "..." so that everything does not fit in the folded box, but that it leaves room for the "see more" button at the bottom right.
My attempt is the following. With
display: -webkit-box;
-webkit-line-clamp: 2;
in the parent of the <p>one to be cut, I get the ellipsis to be in the 2nd line... but I don't know how to make the hole.
.caja {
width: 100%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
padding: 5px 22px 10px 56px;
box-sizing: border-box;
background-color: #e6f9fa;
-webkit-box-shadow: 0px 3px 5px 0px rgba(153, 150, 153, 1);
-moz-box-shadow: 0px 3px 5px 0px rgba(153, 150, 153, 1);
box-shadow: 0px 3px 5px 0px rgba(153, 150, 153, 1);
}
.caja.plegado {
height: 93px;
}
.caja.desplegado {
height: 187px;
}
.caja p.title {
font-size: 18px;
line-height: 26px;
letter-spacing: 0.5px;
color: #152a35;
font-weight: bold;
margin : unset;
margin-bottom: 3px;
}
.caja p.texto {
font-size: 14px;
line-height: 18px;
letter-spacing: 0.5px;
color: #152a35;
padding: unset;
position: relative;
}
.caja p.toggle {
position: absolute;
right: 20px;
bottom: 0;
text-decoration: underline;
color: #ff7000;
line-height: 10px;
}
.caja p.toggle:after {
content: '';
width: 15px;
display: inline-block;
height: 12px;
transition: transform 0.3s ease;
transform-origin: 9px 8px;
margin-left: 2px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAAAoUlEQVQ4EWNgGAWMuILgfwmDGMNfhnVgeQ6GQMZ2htfY1GI1AKp5H8N/Bm2opisMnAxO2AxhQjcVTfMVBkaGq0A1OgzfGfb9r2QQRVePYgCGZqCtDMxAjMcQuBewaYY5GZ8c2AB8CmBORlEDchEHgyPIAogX/jKshwYYzsBi7GF4BfcOKHB/APUAASwMPgD9eRRXSMNcgWTIUaDYB5j4SKcBw3JNWr+VO8cAAAAASUVORK5CYII=');
}
.caja.plegado p.toggle:after {
transform: rotate(180deg);
}
.caja>div {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;
height: 52px;
}
.caja.desplegado>div {
-webkit-line-clamp: unset;
}
.caja.desplegado p.toggle.mas,
.caja.plegado p.toggle.menos {
display: none;
}<div class="caja plegado">
<p class="title">Lorem ipsum dolor sit amet</p>
<div>
<p class="texto">
Nam tellus ligula, scelerisque quis velit eu, venenatis dictum dui. Vestibulum nibh leo, consectetur in odio sed, tristique ullamcorper urna. Nullam ullamcorper rutrum arcu. Mauris accumsan lectus est, finibus iaculis felis faucibus vel. Nullam lacus enim, gravida vitae pharetra iaculis, varius vitae urna. Sed id fringilla enim. Nunc ut massa id lorem porttitor mollis. Nulla bibendum purus in mollis consectetur. Curabitur ac odio a sapien consectetur rhoncus. Morbi nec magna at urna dignissim aliquet.
</p>
</div>
<p class="toggle mas">Ver más</p>
<p class="toggle menos">Ver menos</p>
</div>As you can see, it stays like this
Grades:
The text must be a single text
<p>to be responsive. If it weren't responsive, I would separate the text into 2<p>'s so that the first one has 100% of itwidthand the second a little less for the gap.I'm looking for a solution that is 100% CSS
It is essential that the "See more" go on the same line as the 2nd line of the paragraph. Customer requests ?♂
The only solution that occurs to me is a fudge that gives the hit, and is to put a pseusoelement of
<p>so that it covers the last words with the blue color of the box and thus simulate that gap.The problem will be that I can cut a letter in half