Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-text/white-space/text-wrap-balance-line-clamp-007.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS test: balancing and line-clamp</title>
<meta charset="utf-8">
<link rel='author' title='Andreu Botella' href='mailto:abotella@igalia.com'>
<meta name="assert" content="If the element is affected by line-clamp, the clamping effect is applied first, then the remaining lines are balanced. If the clamp point wass at the end of the line-clamp container, no ellipsis would be shown, and so the width it would otherwise have would not affect the balancing. However, if the clamp point is at the end of the paragraph but before the end of the line-clamp container, there is an ellipsis, and the balancing is affected.">
<link rel='match' href="reference/text-wrap-balance-line-clamp-002-ref.html">
<style>
div {
border: solid;
font-family: monospace;
font-size: 4rem;
line-height: 1rem;
margin: 1ch;
width: calc(15.1ch / 4); /* fits 15.1 characters at the span's font-size */
}
div span {
font-size: 1rem;
}
.test {
border-color: blue;
text-wrap-style: balance;
line-clamp: 2;
/* This code is unnecessary in any browser that supports the unprefixed version of line-clamp,
but neither does it have any detrimental effect,
and it broadens the test to browsers that only support the prefixed version */
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.test p {
margin: 0;
}
.ref {
border-color: orange;
}
</style>
<p>Test passes if the box with a blue frame is identical to the orange one.
<div class="test">
<p><span>1 2 3 4 5 6 7 8 9 0 1 2</span></p>
<p>Hidden</p>
</div>
<div class="ref">
<span>1 2 3 4 5 6 7 <br> 8 9 0 1 2</span>…
</div>
<!--
The optimal balancing with the ellipsis, considering that its 4 times the width
of the characters inside the <span>, is:
|---------------|
|1 2 3 4 5 6 7 |
|8 9 0 1 2.... |
|---------------|
The optimal balancing without the ellipsis would be:
|---------------|
|1 2 3 4 5 6 |
|7 8 9 0 1 2 |
|---------------|
If the line-clamp only had the first <p>, the clamp point would be at the end of
the line-clamp container, so the ellipsis shouldn't show, and the balancing
shouldn't take its width into account. However, here the clamp point is at the
end of a paragraph but not at the end of the container, so the ellipsis should
be shown and taken into account.
-->