Мне нужно разместить текст внутри блока овальной формы так, чтобы он не выходил за его пределы. Пробовал следующий вариант с использованием shape-outside:
.test-block {
position: absolute;
width: 1000px;
height: 500px;
padding: 0;
word-wrap: break-word;
hyphens: auto;
}
.test-block__circle {
display: inline-block;
width: calc(50% - 5px);
height: 100%;
}
.test-block__circle_left {
float: left;
shape-outside: url("/assets/img/circle-half-left.svg");
}
.test-block__circle_right {
float: right;
shape-outside: url("/assets/img/circle-half-right.svg");
}
.test-block__content {
display: inline;
text-align: center;
}
Здесь "circle-half-(left|right).svg" - это просто изображение половины круга. Текст размещается внутри круга, но при разных width и height элемента изображение не растягивается, а находится внутри элемента, как у фона при background-size: contain. Так вот мне, по сути нужно, чтобы изображение в shape-outside растягивалось на все данное ему пространство. Как это реализовать?