HTML/CSS justifying text in separate blocks - html

Question

Taking any page from any book or article that is justified and trying to make an exact online replica (same look and feel with HTML/CSS), that is including justifying the text with the exact line break and setting the outer wrapper with a width that match the min/max-width of the text itself - is this at all possible?
The HTML could be something like this:
...
<div class="page-wrapper">
<span class="line">The Republic of Plato is the longest of his works with the exception of the Laws,</span>
<span class="line">and is certainly the greatest of them. There are nearer approaches to modern</span>
<span class="line">metaphysics in the Philebus and in the Sophist; the Politicus or Statesman is</span>
<span class="line">more ideal; the form and institutions of the State are more clearly drawn out</span>
</div>
...
Note 1:
This CSS-trick isen't scalable as it relies on the rendering engine, and either the fix with (in example below set as 500px) will break either A) too early and add unwanted breaklines, B) too late and add large word-spacing or C) a case-by-case assessment that's of no good either as it's maybe perfect on the desktop but falls short on either A) or B) on mobile, vice versa.
.page-wrapper {
text-align: justify;
width: 500px;
}
.line:after {
content: "";
display: inline-block;
width: 100%;
}
Note 2:
I would prefer a pure HTML/CSS solution, if this is not possible, let's get JS on the table...

Answer 1

You could just use <p> paragraph with <br> break tags where necessary.
CSS wouldn't be complicated either
p {
text-align: justify;
}
Although I'm not necesarilly sure
What you're asking for
Why it has to be an exact replica of the source, since web is fairly dynamic.
C) a case-by-case assessment that's of no good either as it's maybe perfect on the desktop but falls short on either A) or B) on mobile, vice versa.
Seeing as you are also having problems with different sizes, #media queries might help quite a bit.
#media only screen and (max-width: 600px) {
// DO SOMETHING HERE IF SCREEN IS SMALLER THAN 600px
}
You could also have 2 different divs and hide one where necessary, and show the other.
div.mobile {
display: block;
}
div.desktop {
display: none;
}
#media only screen and (max-width: 600px) {
div.desktop {
display: block;
}
div.mobile{
display: none;
}
}

Answer 2

The quick and dirty way:
Work out you maximum character length. Use a monospaced font. Set your wrapper width using the ch unit and your max character count, eg 82ch. Next set a container with a max width of 100vw and overflow:auto so that the content is scrollable.
.page-container {
max-width:100vw;
overflow:auto;
}
.page-wrapper {
text-align: justify;
width: 82ch;
background-color:#EEE;
font-family:courier;
font-size:15px;
}
.line:after {
content: "";
display: inline-block;
width: 100%;
}
<div class="page-container">
<p class="page-wrapper">
<span class="line">The Republic of Plato is the longest of his works with the exception of the Laws,</span>
<span class="line">and is certainly the greatest of them. There are nearer approaches to modern</span>
<span class="line">metaphysics in the Philebus and in the Sophist; the Politicus or Statesman is</span>
<span class="line">more ideal; the form and institutions of the State are more clearly drawn out</span>
</p>
</div>
Slightly fancier:
Same as the above but set some media break points to adjust the font size. I'll leave it to you to work out font-sizes and break points.
.page-container {
max-width: 100vw;
overflow: auto;
}
.page-wrapper {
text-align: justify;
width: 82ch;
background-color: #EEE;
font-family: courier;
font-size: 15px;
}
.line:after {
content: "";
display: inline-block;
width: 100%;
}
#media screen and (max-width:768px) {
.page-wrapper {
background-color: #EFE;
font-size: 12px;
}
}
#media screen and (max-width:575px) {
.page-wrapper {
background-color: #FEE;
font-size: 11px;
}
}
<div class="page-container">
<p class="page-wrapper">
<span class="line">The Republic of Plato is the longest of his works with the exception of the Laws,</span>
<span class="line">and is certainly the greatest of them. There are nearer approaches to modern</span>
<span class="line">metaphysics in the Philebus and in the Sophist; the Politicus or Statesman is</span>
<span class="line">more ideal; the form and institutions of the State are more clearly drawn out</span>
</p>
</div>
What javascript can add
You could use javascript to calculate the max number of characters per line and update the with in ch based on the result.
Why not calculate font size based on width I hear someone ask? Well the problem with that is font size is based on character height, so basing it of width is... problematic.