Is there a way to display all text in a div vertically, with one character per line and centered, without using a fixed width?
I have achieved this layout by giving the div a fixed width of width: 7%; and using word-break: break-all;
Would it be possible to achieve this using CSS without setting a fixed width?
.flex-container {
display: flex;
border: 1px solid #000000;
}
.flex-container > div {
width: 400px;
height: 300px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container > div:nth-child(odd) {
background-color : #62d962;
}
.flex-container > div:last-child {
display: flex;
justify-content: flex-end;
}
.flex-container > div:last-child div {
width: 7%;
}
.flex-container div:last-child div:nth-child(odd){
background-color: #65e9e3;
word-break: break-all;
line-height: 1em;
padding: 1em 0;
}<div class="flex-container">
<div></div>
<div></div>
<div>
<div>Box</div>
<div></div>
<div>Box</div>
<div></div>
<div>Box</div>
</div>
</div>