动态下划线

Question

假设我在表格上有以下部分

表格部分：

    数据：_____________________________________________________________________________     __________________________________________________________________________________     __________________________________________________________________________________     __________________________________________________________________________________     

我希望能够在保留每一行（即使它未使用）的同时将{{data}}插入到该部分中。我这样做是为了复制旧表格。这个表格必须相同这就是为什么我不能简单地做这样的事情：

<u>{{ data }}<u>

提前感谢您提供的任何帮助！

Answer 1

这里似乎有几个选择;

• Hacky：使用多个文本输入。将它们设置为具有坚实的底部边框（作为下划线）并使用一些javascript来处理在自动换行/箭头键移动之间移动它们。缺点：您会错过某些正确处理文本阅读器，模糊键盘快捷键等等...而且，虽然粘贴相当容易，但复制会很麻烦。

• 使用带有背景图像的文本区域。这取决于您将字体大小/行间距锁定为正确

• Html5：查看使用contenteditable属性。你应该能够使用css和divs / spans相当容易地复制外观。然后做出正确的可编辑

Answer 2

这篇文章可能会有所帮助。 How to underline blank space in CSS?

在他们的示例中，您将把模板代码放在第一个范围内。