Как обвести текст по контуру при переносе на две строки?

Чтобы обвести текст по контуру при переносе на две строки в HTML, можно использовать свойство CSS shape-outside. Для этого необходимо использовать формат SVG, который задаст контур для текста.

Приведу пример кода, как это можно реализовать:

<style>
    .text-container {
        width: 200px; /* задаем ширину контейнера */
        shape-outside: url(#text-shape); /* указываем SVG для контура */
        float: left; /* выравниваем текст влево */
    }

    p {
        margin: 0; /* убираем отступы у абзацев */
    }
</style>

<svg style="display: none;">
    <defs>
        <clipPath id="text-shape">
            <path d="M30,0 L200,0 L200,100 L30,100 Q20,70 30,0"></path>
        </clipPath>
    </defs>
</svg>

<div class="text-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Aenean nec maximus lacus, sed ultrices arcu.</p>
</div>

В данном примере мы создаем контур для текста с помощью SVG <path>, который задает фигуру, по которой текст будет обтекать. Далее с помощью CSS задаем этот контур контейнеру с текстом при помощи свойства shape-outside.

При использовании данного кода текст будет обтекать контур линии, заданный в SVG, а при переносе на новую строку текст будет продолжать этот контур. В данном случае контур задан прямоугольным фрагментом и кривой Безье для плавного перехода к верху контура. Конечно, форму контура можно подстроить под любую, с использованием инструментов редактирования SVG, чтобы текст обтекал любую фигуру.