I'm currently working on implementing a truncating block of text with ellipses that can expand and collapse using a button in a React project. Individually, I've been able to truncate the text correctly with ellipses, and my coworker has positioned the link correctly relative to the block. However, I'm facing an issue where the 'View More' button is overlapping with the ellipses. I've tried different positioning and HTML adjustments, but haven't found a solution yet.
https://i.sstatic.net/DcyfW.png
https://i.sstatic.net/RAXBH.png
Here is the CSS code I'm currently using:
.all-text {
@include typ-body-1-16-regular;
margin-bottom: calc(1.5 * #{$default-padding});
@include xs-mobile {
@include typ-body-2-14-regular;
text-align: left;
}
& .overflow {
@include max-width-for-ingreients;
display: block;
@include xs-mobile {
text-overflow: clip;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
}
& .text-expander {
display: none;
text-decoration: underline;
@include xs-mobile {
display: initial;
cursor: pointer;
background-color: $white;
position: relative;
float: right;
top: -18px;
&.expanded {
top: 0px;
float: revert;
}
}
}
}In the JSX code snippet below, I am trying to get the text to truncate with ellipses while keeping the trailing link inline:
<div className={styles['all-text']}>
<span
className={`${isExpanded ? '' : styles['overflow']}`}
>
<b>{t('subtitle')} </b>
{ingredients}
{isExpanded && expander}
</span>
{!isExpanded && expander}
</div>If you have any suggestions on how I can achieve this truncation without affecting the button alignment, I would greatly appreciate your input!