2

Мне нужно разместить текст внутри блока овальной формы так, чтобы он не выходил за его пределы. Пробовал следующий вариант с использованием 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 растягивалось на все данное ему пространство. Как это реализовать?

3
  • 1
    использовать текст внутри svg 4 апр 2020 в 10:38
  • @StrangerintheQ , Мне еще нужно, чтобы была возможность редактирования текста. Т.е. элемент с текстом должен быть либо textarea, либо иметь атрибут contenteditable. 4 апр 2020 в 11:04
  • @Sevastopol' , Работает прекрасно, если ширина и высота элемента равны. А у меня ширина и высота произвольны и не зависят друг от друга. 4 апр 2020 в 11:37

1 ответ 1

2

Все решил, использовав градиенты:

.test-block__circle_left {
    shape-outside: radial-gradient(at right, transparent 75%, black 0);
}
.test-block__circle_right {
    shape-outside: radial-gradient(at right, transparent 75%, black 0);
}

В итоге все адаптивно, без картинок и svg.

1
  • 1
    Хорошо бы добавить полный код решения, чтобы наглядно было, тогда и плюсы появятся 4 апр 2020 в 13:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.