Поворот текста с упаковкой в ​​карту bootstrap

Question

У меня есть карточка с текстом

    <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>

, который был повернут с использованием css

#heading_card{
    text-orientation: mixed;
    writing-mode: vertical-lr;    
}

Однако, поскольку я не указал высоту, а текст очень длинный , это не обернуть, в результате чего очень длинный вертикальный контейнер. Я попытался поместить его в группу карт, и это не помогло - поскольку остальные карты в группе карт имеют одинаковую высоту, они также стали очень высокими.

Я проверил этот ответ , требуется ручная установка высоты. Сейчас я добавил следующее к heading_card,

height: 150px;

, но я не хочу жестко кодировать вещи. У меня была другая идея - просто использовать разрывы, чтобы текст разбивался на несколько строк, но это выглядит неуклюже. Есть ли альтернатива?

Answer 1

Как насчет присвоения процента высоте, а не фиксированным пикселям, а затем добавлению разрыва слова:

#heading_card{
    text-orientation: mixed;
    writing-mode: vertical-lr;
    word-break: break-word;
    max-height: 35%;
}

   <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>