I'm working on an inline flex div where I want to create a unique effect using the words wrap and the div overflow.
As the window is resized, some of the words in the sentence will disappear, altering the meaning. The width will determine the result:
- We do fun rocket design science
- We do fun rocket science
- We do fun science
- We do science
Check out this working snippet to see what I mean:
.text-container {
font-size: 4.0rem;
line-height: 1.2;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
padding: 10px;
background-color: red;
}
.div1 {
max-height: 100px;
text-align: right;
margin-right: 15px;
background-color: blue;
}
.div2 {
text-align: left;
background-color: green;
}<div class="text-container">
<h3 class="div1"> We do fun rocket design</h3>
<h3 class="div2"> science</h3>
</div>By resizing the window width, words will disappear from the blue zone.
So, my question is:
Is there a CSS solution to center the line based on the displayed text? I have a feeling there might not be, but I'd love some insights from the CSS wizards out there.