Truncation (Ellipsis and Line Clamp)

The cut lands at the logical end of the line, which is the left edge in Arabic, and text-overflow gets that right on its own with no extra rule from you. What breaks it is direction: ltr on the container, usually added to tidy up numbers or file names: the end of the line moves to the right, so the ellipsis eats the opening of the Arabic sentence and keeps its tail. When the value can arrive in either direction, put dir="auto" or unicode-bidi: plaintext on the truncating element itself. A <bdi> around the value is not enough here, since it isolates the ordering without moving the dots: the edge that gets cut follows the direction of the block.

Some designs replace the dots with a gradient fade at the edge, and that does not mirror by itself, because gradients accept no logical keyword: linear-gradient takes to right and to left, and there is no to inline-end. A mask written as to right stays on the right in Arabic while the cut happens on the left, so you get a fade over intact text and a chopped letter with nothing softening it. Redeclare the gradient with to left under [dir="rtl"], and do the same for mask-image. Reserve the space with padding-inline-end, since a hard-coded padding-right leaves the gap at the wrong edge.

A JavaScript string is always stored in logical order: its first item is the first character you read, in Arabic exactly as in English. Build the middle cut straight on that order, and do not try to "fix" it by reversing the string or by going off what you see on screen, because the visual arrangement is produced by the bidi algorithm at paint time and is not how the text is stored. The real trap is that the split point can land inside a single grapheme cluster, detaching a shadda or a fatha from its letter and leaving it hanging on the ellipsis. Segment with Intl.Segmenter at grapheme granularity before you cut.

text-overflow removes whatever sits at the visual end of the line after the bidi algorithm has reordered it, and the visual end is not necessarily the logical end of the string. Put a Latin file name such as Q4-report-final.pdf at the end of an Arabic sentence and let the line overflow: the cut starts at the first letters of the name, because a Latin run is laid out left to right while the line ends on the left. You keep the extension and lose the part that told two files apart. Wrap the name in <bdi>, which isolates it and carries dir="auto", so its order resolves inside its own boundaries and neighbouring punctuation stops migrating across it, and when the head of the name is what matters, cut in the middle in JavaScript instead of leaving it to text-overflow.

A clamp cuts everything past a height derived from line-height, and Arabic letters drop further below the baseline than Latin ones: the tails of jeem, hah and yeh, and the dots underneath them. With the line-height: 1.2 that is common in English paragraphs, overflow: hidden shaves the bottom off the last visible line and the text looks chopped. Start at line-height: 1.7 or 1.8 for an Arabic paragraph, and remember the total height grows by the same factor, so you may need two lines where English had three to keep the card the same height.