如何显示文本区域中的行，使其看起来像记事本?

I need to show lines in my text-area to make it look a like notepad.I have a single text-area only.The below notepad is for reference.

我需要在我的文本区域显示线条，使它看起来像记事本。我只有一个文本区。下面的记事本供参考。

6 个解决方案

#1

Here's an idea: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/

这里有一个想法:http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/

In short: set a background-image and set line-height to whatever line height the image is using.

简而言之:设置背景图像并将线高设置为图像正在使用的线高。

#2

You can do this with CSS styling, based on your image, you can do this:

你可以用CSS样式来做这个，基于你的图像，你可以这样做:

​textarea#area {
    width: 300px;
    height: 400px;
    padding: 0 0 0 20px;
    line-height: 30px;
    background: #fff url("http://i.stack.imgur.com/UfzKa.jpg") no-repeat -75px -160px
}​

See the example fiddle here

请看这个例子小提琴

#3

This should get you started:

这应该让你开始:

HTML

HTML

<textarea class="text">some text</textarea>​

CSS

CSS

.text {
    background: url(http://i.stack.imgur.com/UfzKa.jpg);
    height: 664px;
    width: 495px;
    line-height: 29px;
    padding-top: 136px;
    padding-left: 120px;
}​

Demo http://jsfiddle.net/ptpgb/4/

演示http://jsfiddle.net/ptpgb/4/

#4

Try this one as well

试试这个

<style type="text/css">
textarea {
 background: url(/source/notebook.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

</style>

Hope this helps.

希望这个有帮助。

#5

Adding a background image via CSS should work.

通过CSS添加背景图像应该是可行的。

textarea{ background-image:url(notepad.png); color:ff0000; }

look at here

看这里

#6

You can check try

你可以试一试

<textarea class="notepad"></textarea>

.notepad {
 background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

http://jsfiddle.net/FzFaq/1/

http://jsfiddle.net/FzFaq/1/