I have a card containing text that is not wrapping properly within the card due to rotation using CSS.
<div class="card border-info">
<div id="heading_card" class="card-header">
a very long string of text which is not getting wrapped in a card
</div>
</div>
To address this issue, I tried using text-orientation and writing-mode properties in CSS:
#heading_card{
text-orientation: mixed;
writing-mode: vertical-lr;
}
However, the lack of specified height causes the text to extend beyond the card, leading to a very tall vertical container. Even grouping the cards did not resolve the height alignment problem as all cards shared the same height.
While exploring solutions on Stack Overflow, I found that manually setting a height for the text element solved the issue temporarily:
height: 150px;
But I prefer to avoid hardcoding dimensions. Another option considered was breaking the text into multiple lines using line breaks, but this approach felt inelegant. Are there any alternative methods to address this text wrapping issue?