我試圖創(chuàng)建一個(gè)布局，看起來(lái)像可填充輸入的紙質(zhì)文檔。用戶(hù)輸入數(shù)據(jù)的所有行都應(yīng)該有相同寬度的虛線下劃線。

下面這個(gè)帶有文字修飾的解決方案差不多可以了，但是虛線在字母結(jié)束時(shí)就結(jié)束了。

這是我需要的樣子:

.fillable {
  text-decoration: underline dotted from-font;
  text-underline-position: under;
  word-break: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
  hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-hyphenate-character: '-';
}

<div style="font-family: times new roman, serif; max-width:250mm">
  <div style="border: 3px solid black;">
    <div style="margin:1px;">

      <div class="fillable" style="min-height:3rem; width:50%; margin-left:0.25rem; display: flex; display: -webkit-box; -webkit-box-align:end;">
        <div style="align-self: flex-end; font-size:1.30rem;">B_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA_B</div>
      </div>

      <div style="width:50%; margin-left:0.25rem; font-size:0.8rem">
        (some text some text some text some text some text)
      </div>
      <div class="fillable" style="min-height:1.5rem; width:57%; margin-left:0.25rem; display: flex; display: -webkit-box;-webkit-box-align:end;">
        <div style="align-self: flex-end; font-size:1.30rem;">B_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA_B</div>
      </div>
    </div>
    <div style="width:57%; margin-left:0.25rem; font-size:0.8rem">
      (some text some text)
    </div>
  </div>
</div>

文字裝飾不符合你的要求，你需要找到一個(gè)創(chuàng)造性的解決方案

可能是這樣的，它顯示了想要的行為，控制文本的行高，然后對(duì)每一行應(yīng)用不同的div，對(duì)于這個(gè)方法行高就是一切

const lineHeight = 16;
const textContainers = document.querySelectorAll(".text-container");
const textContainersLength = textContainers.length;

for (let x = 0; x < textContainersLength; x++) {
  const underlines = textContainers[x].querySelector(".underlines");
  const lines = Math.ceil(textContainers[x].clientHeight / lineHeight);

  const line = document.createElement("div");
  line.style.paddingTop = (lineHeight - 1) + "px";
  line.classList.add("line");
  underlines.innerHTML = ""; // clean
  for (let y = 0; y < lines; y++) {
    underlines.appendChild(line.cloneNode());
  }
}

.text-container {
  border-right: 1px dotted black;
  width: 300px;
  font-size: 16px;
  line-height: 16px;
  position: relative;
  margin-bottom: 30px;
}

.text {
  position: relative;
  z-index: 2;
}

.underlines {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.line {
  width: 100%;
  border-bottom: 1px dotted black;
}

<div class="text-container">
  <div class="underlines"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.
  </div>
</div>

<div class="text-container">
  <div class="underlines"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.
  </div>
</div>


<div class="text-container">
  <div class="underlines"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.
  </div>
</div>