line-clamp-with-text-overflow-string-009.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-009.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Overflow: ellipsis directions across plaintext paragraphs</title>

<link rel="author" title="Minseong Kim" href="mailto:jja08111@gmail.com">

<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#text-overflow">

<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis">

<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12617">

<link rel="match" href="reference/line-clamp-with-text-overflow-string-009-ref.html">

<meta name="assert" content="Each ellipsis follows its own plaintext paragraph when the direction changes.">

<link rel="stylesheet" href="/fonts/ahem.css">

<style>

@font-face {

  font-family: mplus-test;

  src: url("/fonts/mplus-1p-regular.woff");

.clamp {

  font: 10px / 40px mplus-test;

  /* 90px for three Ahem glyphs + 20px for "ום A" + 1px of slack. */

  width: calc(90px + 20px + 1px);

  white-space: pre;

  unicode-bidi: plaintext;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  line-clamp: 2;

  overflow: hidden;

  text-overflow: "ום A";

.ahem {

  font: 30px / 40px Ahem;

</style>

<div class="clamp" dir="ltr"><span class="ahem">XXXXXXXXXX</span>

אבג ABC

This third line must be hidden.</div>