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

下面這個帶有文字修飾的解決方案差不多可以了，但是虛線在字母結(jié)束時就結(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>

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

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

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>