CSS баг текстовый отступ первой строки с многострочностью и многоточием при переполнении текста
Проблема заключается в неизвестном и недокументированном свойстве: display: -webkit-box. Все работает нормально на Chrome 86, Edge 42, но не работает на Android 8.0 webkit. Как я могу это исправить? Ниже после текста приведены скриншоты того, как это работает на ПК и на android. Можно ли исправить мою проблему без использования серверной части или javascript? (Только CSS). Насколько я понимаю, на android-webkit-box перестает работать со свойствами первой строки. Из-за этого текст перемещается на новую строку, и переполнение текста просто не работает. Это ошибка css? Если да, то как это исправить?
body {
padding: 10px;
}
.box {
border: 1px solid black;
font-size: 15px;
height: 37px;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
text-align: left;
}
.title {
position: absolute;
top: 0px;
left: 0px;
width: 80px;
background: red;
}
.description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: left;
}
.text:first-line {
text-align: right;
}
.space {
height: 15px;
width: 80px;
float: left;
}<div class="box">
<div class="title">Hello world:</div>
<div class="description">
<div class="space"></div>
<div class="text">There is multiline description with text overflow and text ellipsis and other staff to show 2 lines of our description with first line of right alignment
</div>
</div>
</div>Два скрина: первый - нужный результат, который работает только с пк; второй - неправильный, фактический результат на Android
