Problem with multiple lines ellipsis overflow

Question

Hi I want to use ellipsis overflow for multiple lines with rtl direction and right text align, but it work only in ltr direction

Answer 1

Thanks alot for your help🙏🌹🌹🌹

Answer 2

I found a solution in http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/.

Then, i modified that to works for rtl direction.

.block-with-text {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
width: 400px;
}
/* create the ... */
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
left: 0;
bottom: 0;
background: white;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
left: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}

Answer 3

You are welcome