Я пытаюсь создать эффект, показанный на следующем рисунке.

Идеальный результат

Итак, у меня есть текст слева с максимальной шириной 50% (на самом деле это может быть что угодно), небольшой текст справа и пунктирная линия посередине.

Возникает вопрос: можно ли продлить пунктирную линию до того места, где заканчивается обернутый текст?

Обычно пунктирная линия заканчивается в самой правой точке левого текста, но это нежелательно.

Я работаю с Sass и NextJS (не то чтобы я ожидал, что это будет иметь значение, но вы никогда не знаете, может быть, есть модуль npm, о котором я не слышал только для этого), и так выглядит мой текущий Sass (только с кодом, который имеет значение, я вынул штучку со шрифтами).

.outerDiv{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    align-self: stretch;
}

.text{
    margin: 0;
    max-width: 50%;
}

.dashedLine { /* This is just a div with border */
    height: 1px;
    flex: 1;
    border-bottom: 2px dotted black;
    margin: 0 4px 0 4px;
}

Заранее спасибо.

(Также не стесняйтесь сообщить мне, если у меня есть плохие теги или форматирование, я новичок в задаче вопросов.)

0
Simone Salsi 10 Апр 2021 в 01:32

1 ответ

Лучший ответ