<!DOCTYPE html>
<html>
<head>
<title>Soft Hyphen Test</title>
<style>
p {
text-align: justify;
width: 250px;
height: 250px;
position: relative;
padding: 1px;
}
p > #cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: green;
display: block;
}
</style>
</head>
<body>
<p>
Lorem ipsu­m dol­or sit amet, consec­tetur
ad­ipi­sci­ng elit. Ve­sti­bul­um
va­rius, to­rto­r nec ti­nci­dunt
ali­qu­am, enim ve­lit sem­per nu­lla,
al­iqu­am co­ndim­ent­um est er­at
nec mau­ris. Nam sed ju­sto at nu­nc sem­per
al­iqu­et sed sed nu­lla. Nulla sit am­et
od­io a di­am ves­tib­ulu­m
ve­hic­ula sed vel la­cus. Lor­em ipsum
dolor sit amet, consectetur adipiscing elit. Phasellus
in vestibulum nisl. Nam ti­ncid­unt magna sed
ris­us bl­and­it sa­gitt­is.
Ph­as­ell­us a im­per­di­et mi.
<span id="cover"> </span>
</p>
<p>
A green square and no text should appear above.
</p>
</body>
</html>
Codebase Browser
chromium