精确格式化狭窄浏览器窗口的演员表

Question

我需要在网页上格式化一个“铸件列表”（一系列人/角色对），以近似于专业的结果，当行的文本比浏览器窗口中的可用空间宽时。但是我不确定我是否应该查看CSS Flexbox，网格，JavaScript或其他内容，或者是否有能力生成与我想要的任何东西的生成。

以下是同一演员表列表的一些示例，该示例以不同的宽度为手动格式。 （我在此处使用固定宽度字体，以使显示对齐方式更易于显示，但希望一种可与可变宽度字体一起使用的方法。）

Wolfgang Amadeus Mozart ................. Court Composer
Antonio Salieri ........ Assistant to the Court Composer
Tim ... Assistant to the Assistant to the Court Composer
John Jacob Jingleheimer Schmidt ................. Intern
John Jacob Jingleheimer Schmidt Jr. ....... Secretary to
                     the Assistant to the Court Composer

Wolfgang Amadeus Mozart ..... Court Composer
Antonio Salieri ..... Assistant to the Court
                                    Composer
Tim ...... Assistant to the Assistant to the
                              Court Composer
John Jacob Jingleheimer Schmidt ..... Intern
John Jacob Jingleheimer
   Schmidt Jr. ............ Secretary to the
             Assistant to the Court Composer

Wolfgang Amadeus Mozart ... Court       ; not ideal, better to break the longer name
                         Composer
Antonio Salieri ....... Assistant
            to the Court Composer
Tim ............ Assistant to the 
  Assistant to the Court Composer
John Jacob Jingleheimer
   Schmidt ............... Intern
John Jacob Jingleheimer
   Schmidt Jr. ..... Secretary to
             the Assistant to the 
                   Court Composer

Wolfgang Amadeus
   Mozart .... Court Composer
Antonio Salieri ... Assistant
        to the Court Composer
Tim ........ Assistant to the
       Assistant to the Court
                     Composer
John Jacob Jingleheimer
   Schmidt ........... Intern
John Jacob Jingleheimer
   Schmidt Jr. .... Secretary
      to the Assistant to the
               Court Composer

表达此布局方案背后逻辑的一种方法可能是：

1. 对于每个人/角色对，尝试将文本设置为一行。如果它太宽了：
2. 计算“人”部分中的最后一个单词的宽度，以及“角色”部分中的第一个单词。
3. 将“人”部分分解为多行，因此每行不超过可用宽度的70％，最后一行不比“角色”部分中的第一个单词的宽度宽（加上一个常数缩进和点）。
4. 将“角色”部分分为多行，因此每行不超过可用宽度的70％，而第一行不比“人”部分中的最后一个单词的宽度宽（加上常数） 。
5. 设置“人”部分，随后的线缩进。
6. 在“人”部分的最后一行之后，将“角色”部分的第一行设置为右侧，并用点填充额外的空间。
7. 设置“角色”部分的其余线，正确。

仅使用CSS，是否可以像上面的结果一样获得结果？还是可以在JavaScript中执行此类操作，测量单词并手动定位线路断裂？有人做了类似的事情吗？任何指针都赞赏。

Answer 1

虽然您几乎只能使用CSS到达那里，但是需要计算第二列第一行所需的凹痕，而javaScript必须完成。

该片段在包含文本的第一列Div中的每个列中都有两个跨度。第一个跨度允许白色背景仅用于文本，第二个跨度允许计算实际文本的末尾。从那里可以找到第二列的第一行所需的凹痕。

由于点只是一个视觉线索，它们可以通过伪元素包含，重复径向梯度制作点。

function resize() {
  const cast = document.querySelector('.cast');
  const castX = cast.getBoundingClientRect().x;
  const leftCols = document.querySelectorAll('.cast > *:nth-child(odd)');
  leftCols.forEach(leftCol => {
    const lastEl = leftCol.querySelector('*:last-child');
    const x = lastEl.getBoundingClientRect().x + lastEl.getBoundingClientRect().width - castX;
    const rightCol = leftCol.nextElementSibling;
    const indent = x - (cast.getBoundingClientRect().width * 30 / 100);
    rightCol.style.setProperty('--indent', indent + 'px');
  });
}
window.onload = resize;
window.onresize = resize;

.cast {
  width: 50vw;
  position: relative;
  --lineheight: 1.1em;
  overflow: hidden;
}

.cast>* {
  max-width: 70%;
  margin: 0;
  padding: 0;
  line-height: var(--lineheight);
}

.cast> :nth-child(odd) {
  text-indent: -2em;
  padding-left: 2em;
  text-align: left;
}

.cast>*> :first-child {
  background: white;
}

.cast> :nth-child(odd) :first-child {
  position: relative;
}

.cast> :nth-child(odd) :first-child::after {
  width: 100vw;
  height: var(--lineheight);
  content: '';
  position: absolute;
  bottom: 0;
  z-index: -1;
  background-image: radial-gradient(gray 0 20%, transparent 20% 100%);
  background-repeat: repeat no-repeat;
  background-size: calc(var(--lineheight) / 2) calc(var(--lineheight) / 2);
  background-position: 0 bottom;
}

.cast> :nth-child(even) {
  --indent: 6em;
  text-align: right;
  position: relative;
  left: 30%;
  text-indent: var(--indent);
  margin-top: calc(-1 * var(--lineheight));
}

<div class="cast">
  <div><span>Wolfgang Amadeus Mozart</span><span></span></div>
  <div><span>Court Composer</span></div>
  <div><span>Antonio Salieri</span><span></span></div>
  <div><span>Assistant to the Court Composer</span></div>
  <div><span>Tim</span><span></span></div>
  <div><span>Assistant to the Assistant to the Court Composer</span></div>
  <div><span>John Jacob Jingleheimer Schmidt</span><span></span></div>
  <div><span>Intern</span></div>
  <div><span>John Jacob Jingleheimer Schmidt Jr.</span><span></span></div>
  <div><span>Secretary to the Assistant to the Court Composer</span></div>
</div>