无论文本如何，都在整个部分下划线答案

【问题标题】：Underlining Entire Sections Regardless of Text无论文本如何，都在整个部分下划线
【发布时间】：2014-08-17 13:11:37
【问题描述】：

我需要复制一个旧的工作表单行以符合 Django。

有些字段不管有没有文字都需要下划线。

对于可视化，请参阅“以上员工的技能和知识已被客观评估...”字段found here。

如何在下划线部分添加 {{ data }}？这里出现的另一个复杂情况是每次到达行尾时都需要换行。

我最好的猜测是可以以某种方式使用带有底部边框的表格，但这会使段落在行尾换行变得非常困难。

我的问题最初有点模糊，所以这里有一个更简单的解释。我需要一个总是正好有 6 行的部分，所有的都加下划线，并且可以插入 {{ data }}。这也需要自动换行。

我找到了一种方法来实现这一点。这是一个有点丑陋的解决方案，但我解析了 {{ data }} 并根据数据的长度添加了动态数量的下划线空格。

【问题讨论】：

您是否仅限于使用 css，或者您也可以使用 jquery？（或者，看看这是否有帮助：jsfiddle.net/microbians/csYjC）
我也对 jQuery 持开放态度。不过，您的 jsfiddle 中没有任何下划线。
这不是我的小提琴.. 只是发现如果您正在寻找仅 CSS 的解决方案。
您对此有什么浏览器支持要求？

标签： html css underline

【解决方案1】：

它并不完美，但它确实有效 - 您可能需要稍微调整一下以获得准确的值：

.text
{
    line-height: 2.0em;
    height: 12.0em;
    width: 100%;
    background-image: repeating-linear-gradient(
        180deg,
        transparent,
        transparent 1.95em,
        rgb(100,100,100) 2.0em
    );
}

【讨论】：

【解决方案2】：

不太确定，但是，您可以使用背景来绘制点并在其上放置一个 contenteditable span 。 DEMO

HTML 和 CSS

form {
  margin: 2em;
  padding: 1em;
}

label,
span,
legend {
  background: white;
  padding: 0 0.25em;
}

p {
  min-height: 6em;
  /* tune for number of empty lines to show */
  background: linear-gradient(45deg, transparent 95%, black 95%) 0 -0.2em white;
  background-size: 0.25em 1.2em;
}

span[contenteditable]:empty:before {
  /* role="placeholder" */
  content: "Tell us all about It ! (5 lines or more)";
  /* your own text of course */
  font-style: italic;
  color: gray;
  padding: 0 1em;
  position: relative;
  margin-right: -100%;
  /* keeps dot being seen underneath, avoids span background being drawn */
}

<form>
  <fieldset>
    <legend>Fill in Form</legend>
    <p>
      <label>What do you expect ?</label>
      <span contenteditable="true"></span>
    </p>
  </fieldset>
</form>

【讨论】：

不要忘记span不是输入也不是textarea，你需要javascript支持来生成这个span并将它绑定到textarea
我确实尝试过走后台线路路线。不幸的是，我使用的 PDF 渲染器与背景图像不兼容。我发现了一种通过在字符串中附加动态数量的空格来实现这一点的骇人听闻的方法。我将奖励你赏金，因为你的回答是最好的潜在解决方案。
好有趣的故事。我最终回到了这个解决方案。它需要使用@page css 装饰器来完成，但最终解决了:)

【解决方案3】：

如果我正确理解了您的问题 - 只需将 {{ data }} 包装在中间垂直对齐的 div 中，并添加底部边框和一些填充。将其全部包装在具有行高的容器中。我做了一个小提琴来说明。

.middle {
    border-bottom: 1px solid black;
    display: inline-block;
    padding: 0 15px 5px 15px;
}

http://jsfiddle.net/PkBb5/2/

【讨论】：

我知道如何给一个部分加下划线。我需要一个总是正好有 6 行的部分，所有部分都带有下划线，并且可以将 {{ data }} 插入其中。