Text truncation using text-overflow: ellipsis and line-clamp CSS properties

Do all screen readers read all of the text, not just the visible text?

text-overflow: ellipsis

This is a block of text which should be limited to one line, and only a small portion of it visible, but the whole of it should be read by the screen reader.

Necessary properties:
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      

text-overflow: ellipsis with dir=rtl

This is a block of text which should be limited to one line, and only a small portion of it visible, but the whole of it should be read by the screen reader.

Necessary style properties:
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      
Necessary attribute: dir="rtl"

line-clamp: 2

This is a block of text which should be limited to no more than two lines visible, but the whole of it should be read by the screen reader.

Necessary properties:
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      

Screen reader results