每行文本下带有线条的文本区域[重复]答案

【问题标题】：Textarea with lines under each row of text [duplicate]每行文本下带有线条的文本区域[重复]
【发布时间】：2013-11-19 12:01:38
【问题描述】：

如何在每行文本下设计一个带有线条的文本区域，如下图所示：

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我在 jsfiddle 中为你创建了这个，这是你要找的吗？

<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>

演示： http://jsfiddle.net/TV47t/1/

【讨论】：

它需要对 css 稍作改动来处理溢出，但它对您来说是一个很好、简单的工作示例。
@Er.KT 您将需要调整line-height 和背景图像上的行距大小，一旦您输入的行数超出您所见，文本将向上移动并与线条不同步...通过获得正确的线条高度和图像大小，您将能够让它看起来不错;-)
谢谢哥们，我觉得 ._ta textarea {overflow:auto;} 会更好
这里的一个问题是当您输入超过 5 行的文本时，然后在向上移动文本对齐中断时，请帮我解决这个问题
这是我上一条评论所建议的。你只需要摆弄行高和背景图像的大小就可以了。我今天不在办公室，但明天可以找你:-)

【解决方案2】：

使用background-image 或CSS gradients 来实现您想要的。

【讨论】：

我的想法是一样的，但在背景图像的情况下可能会出现字体大小问题
没有。您必须保留一个带有背景图像的 div，并在其下创建 textarea。
但是如何在后面像“p”一样管理小的，现在p的一半在线下，一半在线以上，那么现在如何管理呢？
用线条设置背景图案（与调整大小相关），然后为文本设置font-family、font-size 和line-height。
当你制作文本区域时，你必须相应地定位 div 和 textarea，以便它以图像中提到的方式以及font-size，@987654327 中提到的方式为每个字符提供住宿@ 和其他 CSS 属性。 - @Er.KT