Соединение двух текстов через многоточие на CSS

Question

Вот пример того что надо получить

https://codepen.io/spensersab/pen/MWLBNKo

li {
  width: 400px;
  overflow: hidden;
  border: 0px solid red;
}

li+li {
  margin-top: 10px;
}

li:after {
  border: 0px solid green;
  content: '.....................................................................................................';
  display: block;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 2pt;
}

li .challenge {
  border: px solid blue;
  float: left;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNCAyJyBoZWlnaHQ9JzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGNpcmNsZSBjeD0nMicgY3k9JzAuOCcgcj0nMC44Jy8+PC9zdmc+");
  background-repeat: repeat-x;
  background-position: 0 calc(100% - 1.5pt);
}

li .challenge:after {
  border: 1px solid green;
  content: '.....................................................................................................';
  display: block;
  white-space: nowrap;
  overflow: hidden;
  float: left;
  margin-top: -100%;
}

li .challenge span {
  background-color: #fff;
}

li .response {
  border: 0px solid orange;
  float: right;
  text-align: right;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNCAyJyBoZWlnaHQ9JzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGNpcmNsZSBjeD0nMicgY3k9JzAuOCcgcj0nMC44Jy8+PC9zdmc+");
  background-repeat: repeat-x;
  background-position: 0 11pt;
}

li .response span {
  background-color: #fff;
  padding-left: 1pt;
}

<ul>
  <li>
    <span class="challenge"><span>challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge</span></span>
    <span class="response"><span>response response response response response response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge</span></span>
    <span class="response"><span>response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge challenge </span></span>
    <span class="response"><span>response response response response response response response response response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge</span></span>
    <span class="response"><span>response</span></span>
  </li>
</ul>

Первых три пункта работаю правильно.

Четвертый пункт должен располагаться в одной строке т.к. левый и правый тексты короткие, но не могу ничего придумать.

Как что можно придумать? JS нельзя использовать.

Дополнение по задаче

Задача следующая: Надо сделать что то вроде содержания с правым и левым текстами. Количество текста с обоих сторон заранее не известно.

Случай первый: оба текста коротких, тогда должны быть на одной строке и разделены точками (стандартное содержание)

Случай второй: левая часть длинная (несколько строк), то эта строка должна дополниться многоточие до конца строки, а правая часть должна начаться на следующей строки, в начале должно быть минимальное расстояние с точкам (например 30пикс) и дальше правый текст. Правый текст должен прижат к правой стороне. Он так же может быть в одне или несколько строк

Может сумбурно написал, но вроде как на примере видно как должно работать. Но не работает случай когда они оба текста помещаются в одну строку.

Answer 1

Думаю, что решение ниже - это максимум, что можно сделать без скриптов и существенного вмешательства в разметку.

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

ul {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 0.5em;
  /* For example only --> */ background-color: #ccf; overflow: scroll; resize: both;
}

li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  /* For example only --> */ background-color: #cdd;
}
li + li { margin-top: 2em; }

li > span.challenge {
  min-width: fit-content;
  flex: 1;
  background: left bottom 0.25em / 4px 2px radial-gradient(circle, #f0f 0 0.5px, #f0f0 1px) repeat-x;
}
li > span.response {
  margin-left: auto;
  min-width: fit-content;
  flex: 1;
  text-align: right;
  background: left top 0.75em / 4px 2px radial-gradient(circle, #f0f 0 0.5px, #f0f0 1px) repeat-x;
}

li > span.challenge > span { background-color: #fff; padding-right: 5px; }
li > span.response > span { background-color: #fff; padding-left: 5px; }

<ul>
  <li>
    <span class="challenge"><span>challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge</span></span>
    <span class="response"><span>response response response response response response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge</span></span>
    <span class="response"><span>response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge challenge </span></span>
    <span class="response"><span>response response response response response response response response response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge</span></span>
    <span class="response"><span>response</span></span>
  </li>
</ul>

Запустите сниппет и разверните на полный экран, измените размеры списка, "ухватив" его за правый нижний угол, чтобы проверить адаптивность. Цвета добавлены для наглядности работы. Необязательные строки помечены комментариями.

Данное оформление я использую для формирования ПДФ файла с помощью модуля WeasyPrint. В документации написано "The min-content, max-content and fit-content() sizing values are not supported." Вот ссылка на документацию weasyprint CSS. Есть ли возможность переделать ваше решение?

Если отказаться от использования вычисляемых значений, тогда response будет всегда начинаться ниже, и поставить его в одну строку с challenge не получится:

ul {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 0.5em;
  /* For example only --> */ background-color: #ccf; overflow: scroll; resize: both;
}

li {
  display: flex;
  flex-direction: column;
  /* For example only --> */ background-color: #cdd;
}
li + li { margin-top: 2em; }

li > span.challenge {
  background: left bottom 0.25em / 4px 2px radial-gradient(circle, #f0f 0 0.5px, #f0f0 1px) repeat-x;
}
li > span.response {
  text-align: right;
  background: left top 0.75em / 4px 2px radial-gradient(circle, #f0f 0 0.5px, #f0f0 1px) repeat-x;
}

li > span.challenge > span { background-color: #fff; padding-right: 5px; }
li > span.response > span { background-color: #fff; padding-left: 5px; }

<ul>
  <li>
    <span class="challenge"><span>challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge</span></span>
    <span class="response"><span>response response response response response response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge</span></span>
    <span class="response"><span>response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge challenge </span></span>
    <span class="response"><span>response response response response response response response response response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge</span></span>
    <span class="response"><span>response</span></span>
  </li>
</ul>

ul {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 0.5em;
  /* For example only --> */ background-color: #ccf; overflow: scroll; resize: both;
}

li {
  /* For example only --> */ background-color: #cdd;
}
li + li { margin-top: 2em; }

li > span.challenge {
  width: 100%;
  display: inline-block;
  text-align: left;
  background: left bottom 0.25em / 4px 2px radial-gradient(circle, #f0f 0 0.5px, #f0f0 1px) repeat-x;
}
li > span.response {
  width: 100%;
  display: inline-block;
  text-align: right;
  background: left top 0.75em / 4px 2px radial-gradient(circle, #f0f 0 0.5px, #f0f0 1px) repeat-x;
}

li > span.challenge > span { background-color: #fff; padding-right: 5px; }
li > span.response > span { background-color: #fff; padding-left: 5px; }

<ul>
  <li>
    <span class="challenge"><span>challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge</span></span>
    <span class="response"><span>response response response response response response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge challenge</span></span>
    <span class="response"><span>response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge challenge </span></span>
    <span class="response"><span>response response response response response response response response response response</span></span>
  </li>
  <li>
    <span class="challenge"><span>challenge</span></span>
    <span class="response"><span>response</span></span>
  </li>
</ul>

БЛОГ НА HUSL

Соединение двух текстов через многоточие на CSS

Ответы (1 шт):