Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>text-box-trim trims the first line to the font-family set by ::first-line, not the block's own font</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
@font-face {
font-family: CSSTest;
src: url(/fonts/CSSTest/csstest-basic-regular.ttf);
}
.spacer {
background: lightgray;
block-size: 60px;
}
.first-line {
font: 100px/1 CSSTest;
text-box: trim-start text;
}
.first-line span {
background: blue;
color: transparent;
}
.second-line {
font: 100px/1 Ahem;
}
</style>
<div class="spacer"></div>
<div class="first-line"><span>XXXX</span></div>
<div class="second-line">XXXX</div>
<div class="spacer"></div>