Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-007.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: bidi text-overflow string and logical line-clamp truncation</title>
<link rel="author" title="Minseong Kim" href="mailto:jja08111@gmail.com">
<link rel="match" href="reference/line-clamp-with-text-overflow-string-007-ref.html">
<meta name="assert" content="Line-clamp truncates an RTL override in logical order and places its default ellipsis outside the override.">
<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);
/* On the second line, the bdo's 21px Ahem font gives each "X" and space
a width of 21px. "XX XX" fits in 111px, but "XX XX" plus the 10px ellipsis
does not. Clamping must hide the second word at the space, leaving the
first "XX". */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: "ום A";
}
.ahem {
font: 30px / 40px Ahem;
}
bdo {
font: 21px / 40px Ahem;
}
.hidden {
color: red;
}
</style>
<div class="clamp" dir="ltr">
<span class="ahem">XXXXXXXXXX</span><br>
<bdo dir="rtl">XX <span class="hidden">XX XX</span></bdo>
</div>