JSFiddle - React, Tailwind, and code Playground

by hoss

HTML

<a href="#" class="headline one">
    
<div class="headline two">
How to Justify a Headline With CSS<span class="headline three">How to Justify a Headline With CSS</span>
</div>
</a>

<div class="page">
     <h1>All Justified Text</h1>
</div>

CSS

.headline.one {
    display: block;
    overflow: hidden;
    height: 30px;
    width: 500px;
}
.headline.two {
    font-size: 20px;
    text-align: justify;
    width: 100%;
    display: block;
    height: 21px;
}
.headline.three {
    font-size: 0px;
    word-spacing: 1000px;
    height: 0px;
    visibility: hidden;
}
.page {
    width: 400px;
    overflow: hidden;
}
p, h1 {
    text-align: justify;
    text-align-last: justify;
    margin: 0;
}
p:after, h1:after {
    content:"";
    display: inline-block;
    width: 100%;
}