text-overflow-ellipsis-bidi.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.testBlock {
  display:block;
  overflow: hidden;
  white-space: nowrap;
  width: 207px;
}

.ellipsis {
  text-overflow: ellipsis;
}
</style>
</head>
<body>
Each consecutive pair of lines should look exactly the same apart from the trailing ellipsis.<br>
The ellipsis should appear on the left for the RTL case and on the right for LTR case.

<br><br>

RTL text:
<div class="testBlock"dir=rtl>
&#x202B;
English Text טקסט עברי לדוגמא טקסט עברי לדוגמא
&#x202c;
</div>
<div class="testBlock ellipsis"dir=rtl>
&#x202B;
English Text טקסט עברי לדוגמא טקסט עברי לדוגמא
&#x202c;
</div>
<br>
LTR Text
<div class="testBlock"dir=ltr>
מילה word אחרת another ועוד yet אחת
</div>

<div class="testBlock ellipsis"dir=ltr>
מילה word אחרת another ועוד yet אחת
</div>


</body>
</html>

chromium/third_party/blink/web_tests/fast/css/text-overflow-ellipsis-bidi.html