Javascript 文本区域，每行文本下有行

我如何设计一个文本区域，在每行文本下面都有行，如下图所示：

---

使用

背景图像

或

CSS渐变

来实现您想要的效果。

我在JSFIDLE中为您创建了这个，这是您想要的吗

<style>
._ta { 
    background-color:#AADDF2;
    padding:10px;
}
._ta textarea { 
    background: transparent url(http://s24.postimg.org/62v2ipx81/underline.png) repeat; 
    border:none;
    height:150px;
    width:300px;
    overflow:hidden;
    line-height:30px;
    font-weight:bold;
    color:#FF9900}
</style>


<div class="_ta">
        I like my name because:<br />
<textarea></textarea>
</div>

主席{
背景色：#AADDF2；
填充：10px；
}
._tatext区域{
背景：透明url(http://s24.postimg.org/62v2ipx81/underline.png)重复；
边界：无；
高度：150像素；
宽度：300px；
溢出：隐藏；
线高：30px；
字体大小：粗体；
颜色：#FF9900}
我喜欢我的名字，因为：

演示：

---

我的想法是一样的，但在背景图像的情况下，可能会出现字体大小问题。你必须在背景图像和创建文本区域下保留一个div。但是如何管理后面的小字体，如“p”，现在p的一半在线条下，一半在线条上，那么现在如何管理呢？使用线条设置背景图案（调整大小相关），然后设置

字体系列

，文本的

字体大小

和

行高

。在创建文本区域时，必须相应地定位div和textarea，以便按照图像中所述的方式容纳每个字符以及

字体大小

、

行高

和其他CSS属性。-@Er.KTit需要稍微修改css以处理溢出，但这是一个很好的简单工作示例。@Er.KT您需要调整背景图像上的

行高

和行距大小，一旦您键入的行数超过您可以看到的行数，文本将向上移动并与行不同步。。。通过获得正确的线条高度和图像大小，您将能够使它看起来很漂亮；-）谢谢你，伙计，我想在这里。_tatextarea{overflow:auto；}会更好。这里的问题是，当你输入的文本超过5行时，在向上移动文本对齐分隔符时，请帮助我解决这个问题，这是我上一次评论的建议。你只需要摆弄线条的高度和背景图像的大小就可以了。我今天不在办公室，但明天可以帮你看一看：-）