Как реализовать обтекание текстом кнопки, когда текст и кнопка разные элементы?

Question

[Елена]

Добрый день ! Текст должен обтекать кнопку сверху и слева. Текст большой, его необходимо обрезать. Поэтому кнопку нельзя поместить внутрь тега span. Свойство float:right не могу использовать.

<div class="container">
      <span class="text">
        {{ data.text }}
      </span>
      <button class="button">Читать</button>
</div>

.container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.text {
    overflow: hidden !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
     white-space: initial;
}

Необходимо получить вот это

Comments

[Ankhena]

Вот аналогичный вопрос с решением Как сверстать блок, чтобы дочерние элементы переносились на новую строку с учетом фиксированной кнопки в углу?

Answer 1

[parse-g]

Попробуй для кнопки использовать значение display: inline-block или display: inline-flex для кнопки

Comments

[xdevelx]

А не напомните, какое значение display по умолчанию установлено браузерами для button?

[Елена]

попробовала( к сожалению , сверху он по-прежнему не обтекает кнопку