Set content width to automatically be to equal width - css

Question

The question title could be more clear, but given some text, if the browser width lets it fit on one line, then I want it to be centered, otherwise, I don't want just one word wrapping to the next line, how do I make sure that it break the lines to be about equal lengths? If there's a CSS only way that's be best, otherwise, I'd like to do it in Angular 2...
i.e:
Desktop:
[Screen Edge]...."Some interesting text is here"....[Screen Edge]
Phone:
[Screen Edge]....."Some interesting"......[Screen Edge]
[Screen Edge]......."text is here"........[Screen Edge]
NOT
Phone:
[Screen Edge]."Some interesting text is"..[Screen Edge]
[Screen Edge]..........."here"............[Screen Edge]

Answer 1

Here, I hope it helps. You must set your container to text-align: center to center the texts. If you want it fluid, you set its width to 100%. You may also add padding so when you switch to mobile, it will not looked populated.
body {
text-align: center;
}
body > div {
width: 100%;
height: auto;
text-align: center;
}
body > div > div {
margin-bottom: 20px;
text-align: center;
border: 1px solid black;
margin: auto;
padding: 40px;
}
.web {
width: 400px;
text-align: center;
height: 50px;
}
.mobile {
width: 100px;
height: 80px;
}
.container {
width: 100%;
height: auto;
text-align: center;
}
<div>
<div class="web">
<div class="container">
<span>Some interesting text here</span>
</div>
</div>
<div class="mobile">
<div class="container">
<span>Some interesting text here</span>
</div>
</div>
</div>

Answer 2

Option 1:
use flexbox:
with flex-wrap: wrap; and wrap your text with div so it will break at the point you want when you need to wrap.
.centered {
text-align: center;
margin: 10vh 15vw;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
<div class="centered">
<span>Some interesting text is here </span><span>Some interesting text is here </span>
</div>
Option 2:
use text-align: center; to center text
use margin: 5px 80px; to create basic margin
use non-breaking space to make sure your text does not break.
(or you can wrap the text with span with a css rule set white-space: nowrap)
.centered {
margin-top: 100px;
text-align: center;
}
.centered > div {
text-align: center;
margin: 10vh 15vw;
}
<div class="centered"><div>Some interesting text is here Some interesting text is here</div></div>