line-clamp-with-text-overflow-string-005.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-005.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Overflow: line-clamp with a bidi text-overflow string (rtl)</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-005-ref.html">

<meta name="assert" content="In an RTL paragraph, text-overflow isolates its custom string, while line-clamp uses the default ellipsis.">

<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 ום" and 1px of slack. */

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

  white-space: pre;

  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="rtl"><span class="ahem">XXXXXXXXXX</span>

אבג

This third line must be hidden.</div>