Как сверстать содержание в квадратном блоке?

Question

[fron321]

Нужно чтобы при уменьшении ширины окна браузера квадрат уменьшался и по высоте и по ширине. В квадрате должно быть содержание такого плана как на рисунке, чтобы при сжатии точки никуда не пропадали и при переносе слов точки никуда не пропадали.

Comments

[Ankhena]

Не первый раз вижу этот скрин и даже писала ответ.
Можно попробовать загуглить по картинке.

Answer 1

[Александр Варлаков]

Получите код:

<div class="container">

<div class="row">
  <div class="v-1">Lorem ipsum dolor sit amet.</div>
  <div class="dotted"></div>
  <div class="v-2">Lorem ipsum dolor sit amet.</div>
</div>  

<div class="row">
  <div class="v-1">Lorem ipsum dolor sit amet.</div>
  <div class="dotted"></div>
  <div class="v-2">Lorem ipsum dolor sit amet.</div>
</div>  

</div>

.container{
  display: flex;
  flex-direction: column;
  width: 100%
}

.row{
  display: flex;
  width: 100%;
}
.v-1{
  width: 20%;
}

.dotted{
  width: 80%;
  border-bottom: 1px dotted silver;
}
.v-2{
  width: 20%;
}

Comments

[fron321]

Спасибо. Но как сделать так чтобы при переносе слов (на 584px у вас) точки доставали прямо до слова внизу?

[fron321]

как сделать так чтобы при переносе слов (на 584px у вас) точки доставали прямо до слова внизу?

[Александр Варлаков]

fron321, В этом коде никак. - потому как это разные блоки.
Можно попробовать media-запрос при определенной ширине., допустим
- будет абсолютно позиционирован и растянут на какое-то кол-во процентов, что-бы он доезжал до слов

Answer 2

[Ankhena]

Держите