Wrap text to fill vertical space in CSS - html

Question

On the web, how can I flow text to fill the vertical space in a fixed height container before filling the horizontal space? (ideally, without Javascript)

Answer 1

css:
h1 {
text-align: center;
font-family: 'Bowlby One SC', cursive;
}
JS:
jQuery("h1").fitText(0.38);

Answer 2

You would need to do it with inline css and it wouldn't be simple or perfect.
Basically, you would need to estimate the number of characters that could fit the entire container. Then, every time you show, count the characters you have and do something like current_chars/max_chars
e.g.
max_chars = 1000
Current_chars = 500
500/1000 = 0.5
padding-left: 25%
padding-right: 25%
Something like that

Answer 3

It's doubtful you can pull this off in CSS.
For reference, here's a working JS solution. It may have some extra fluff, but it's functional.
Basically checking paragraph height against the parent, adjusting it by 1px incrementally until it fits within the fixed-height. If no more horizontal room is available, like in a mobile view, it scrolls automatically via overflow: auto;.
Codepen
var container = document.getElementById('container');
var paragraph = document.getElementById('paragraph');
var containerHeight = container.offsetHeight - 40; /* 40 is for 2 x parent padding */
var paragraphHeight = paragraph.offsetHeight;
/* This is needed to extract and seperate number from "px"; FYI there are other ways to do this, but this works for demo purposes. */
var paragraphStyle = window.getComputedStyle ? getComputedStyle(paragraph, null) : paragraph.currentStyle;
var paragraphInitialMaxWidth = parseInt(paragraphStyle.maxWidth, 10);
console.log("-------------");
console.log("Container initial height: " + containerHeight);
console.log("Paragraph initial height: " + paragraphHeight);
console.log("Paragraph initial max-width: " + paragraphInitialMaxWidth);
checkHeight();
function checkHeight() {
paragraphHeight = paragraph.offsetHeight;
if (paragraphHeight > containerHeight) {
while (paragraphHeight > containerHeight) {
paragraph.style.maxWidth = parseInt(paragraphStyle.maxWidth, 10) + 1 + "px";
paragraphHeight = document.getElementById('paragraph').offsetHeight;
}
} else {
paragraph.style.maxWidth = paragraphInitialMaxWidth + "px";
paragraphHeight = paragraph.offsetHeight;
}
console.log("New paragraph computed height: " + paragraph.offsetHeight);
console.log("New paragraph max-width: " + parseInt(paragraphStyle.maxWidth, 10));
}
document.getElementById('button1').onclick = function() {
paragraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt euismod augue, ut aliquam velit dapibus at. Nullam ultrices accumsan nulla, non pharetra metus. Phasellus finibus blandit sem, ac ultrices arcu posuere in. Phasellus nibh leo, vulputate quis est a, auctor tincidunt arcu. Mauris rutrum turpis sed magna lacinia, quis placerat magna vulputate. Integer augue eros, feugiat et ipsum sit amet, ullamcorper lacinia nisi. Cras id urna ac massa laoreet ornare quis at lacus. Pellentesque in erat eros. Aliquam dignissim mollis mi, a placerat nibh sollicitudin vel. Vivamus accumsan ultricies eleifend. Suspendisse semper feugiat ex. Curabitur sagittis tempor lorem. Cras a volutpat erat. Quisque mattis ultrices orci vel condimentum. Donec imperdiet mauris vitae nisl sodales, non fermentum dolor eleifend.";
checkHeight();
}
document.getElementById('button2').onclick = function() {
paragraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt euismod augue, ut aliquam velit dapibus at. Nullam ultrices accumsan nulla, non pharetra metus. Phasellus finibus blandit sem, ac ultrices arcu posuere in. Phasellus nibh leo, vulputate quis est a, auctor tincidunt arcu. Mauris rutrum turpis sed magna lacinia, quis placerat magna vulputate. Integer augue eros, feugiat et ipsum sit amet, ullamcorper lacinia nisi. Cras id urna ac massa laoreet ornare quis at lacus. Pellentesque in erat eros. Aliquam dignissim mollis mi, a placerat nibh sollicitudin vel. Vivamus accumsan ultricies eleifend. Suspendisse semper feugiat ex. Curabitur sagittis tempor lorem. Cras a volutpat erat. Quisque mattis ultrices orci vel condimentum. Donec imperdiet mauris vitae nisl sodales, non fermentum dolor eleifend. Suspendisse rhoncus turpis lacus, ac vestibulum ante facilisis id. Vivamus vestibulum tellus quis odio elementum aliquam. Quisque id magna nibh. Phasellus ac dignissim mauris. Curabitur rhoncus ultricies libero non efficitur. Nulla posuere, lectus tristique tincidunt dapibus, diam velit maximus ligula, nec gravida nisl sem sed nisl. Nam in vulputate libero. Quisque aliquet, quam non sagittis luctus, libero elit iaculis risus, et sollicitudin ligula augue id erat. Mauris consectetur risus vitae arcu condimentum pulvinar. Curabitur sit amet orci vel massa eleifend tempus non id elit. Integer a ante a arcu fringilla congue. Maecenas ante sapien, imperdiet ac dictum ut, sodales ut erat. Phasellus et scelerisque tortor. Nunc pulvinar nisl id massa imperdiet, ut ullamcorper ipsum consectetur. Maecenas porttitor tristique volutpat. Integer a justo vitae felis pellentesque pretium. Etiam congue, turpis in vulputate tristique, orci enim tincidunt sapien, ac dictum lacus ex ut ex. Duis nec gravida magna, feugiat volutpat eros. In hac habitasse platea dictumst. Morbi sit amet orci a nisi viverra molestie. Quisque sodales velit a ex tincidunt vehicula. Etiam sodales efficitur velit, sed auctor tellus auctor eu. Curabitur aliquam dui ac tellus feugiat, nec mollis leo auctor. Maecenas malesuada rhoncus arcu sed condimentum. Cras sem arcu, tempus eu arcu ac, condimentum efficitur augue. Cras posuere magna quis nisl blandit tincidunt. Maecenas elementum turpis et risus viverra semper. Nullam libero elit, fermentum ullamcorper placerat quis, malesuada vel velit. Fusce tempus lacinia velit nec consequat. Donec gravida, dui eget elementum posuere, massa mi posuere nisi, vel tempus sem turpis vitae metus. Morbi egestas elit quis velit aliquam, et imperdiet felis condimentum. Sed eget euismod massa. Phasellus id dictum elit. Pellentesque imperdiet, mauris semper vehicula porta, nisi nulla sagittis turpis, vitae posuere nisl magna vel urna.";
checkHeight();
}
#container {
background-color: pink;
border: 3px solid red;
height: 400px;
padding: 20px;
overflow: auto;
}
#paragraph {
max-width: 300px;
margin: 0 auto;
text-align: center;
}
<button id="button1">Short text</button>
<button id="button2">Long text</button>
<div id="container">
<p id="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt euismod augue, ut aliquam velit dapibus at. Nullam ultrices accumsan nulla, non pharetra metus. Phasellus finibus blandit sem, ac ultrices arcu posuere in. Phasellus nibh leo, vulputate quis est a, auctor tincidunt arcu. Mauris rutrum turpis sed magna lacinia, quis placerat magna vulputate. Integer augue eros, feugiat et ipsum sit amet, ullamcorper lacinia nisi. Cras id urna ac massa laoreet ornare quis at lacus. Pellentesque in erat eros. Aliquam dignissim mollis mi, a placerat nibh sollicitudin vel. Vivamus accumsan ultricies eleifend. Suspendisse semper feugiat ex. Curabitur sagittis tempor lorem. Cras a volutpat erat. Quisque mattis ultrices orci vel condimentum. Donec imperdiet mauris vitae nisl sodales, non fermentum dolor eleifend.</p>
</div>