Brownman Revival Brownman Revival - 7 months ago 29
Javascript Question

Span with lines jquery

How to create span with lines like in notebook. When text is added to span i want the lines to be there.

I am appending text like

$('spanid').text('texthere')


I tried using underline on css but the problem is the span is not taking the whole parent width.

also tried using
border-bottom
but not getting what i desire.

Desired Output : I am appending text on a span. Sometimes not text. What i want is when no text span should have lines. To be exact 10 lines. When i add lines the text should have lines under it. And depending on the text lines, lines should be appended to the span so that there will always be 10 lines.

FYI: span with multiple lines with underlines

searching using above but maybe i am looking at it the wrong way.

Any suggestion is appreaciated. (pls not plugin only jquery)



var data = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. ";

$("#printmemo").html(data);//set data using html() need to add more lines after inserting data no idea how to add lines

.memo{
font-size: 20px;
/*border-bottom: 1px solid #000000;*/
/*text-align: center;*/
text-decoration: underline;
width:100%;
display:inline-block;
}
.memo:empty{
display:inline-block;
border-bottom: 1px solid #000000;
width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span type="text" id="printmemo" class="memo"></span>




Answer

You could also use repeating-linear-gradient for the lines. In this case you also need to watch for line-height and gradient size. In example .lines has line height equals to 21px (14 * 1.5) so gradient size must be 21px too: 20px for transparent space and 1px for the line. You could change color of lines to any without problem

.lines {
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 20px, #bbb 20px, #bbb 21px);
    background-attachment: local;
    display: block;
    width: 500px;
    height: 230px;
    font-size: 14px;
    line-height: 1.5;
    font-family: Tahoma, sans-serif;
}
<span class="lines">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dignissimos id ipsa iste nisi porro ratione tenetur vero. Delectus dolores earum expedita, harum hic nisi tenetur? Eveniet fuga sunt tempora.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dignissimos id ipsa iste nisi porro ratione tenetur vero. Delectus dolores earum expedita, harum hic nisi tenetur? Eveniet fuga sunt tempora.
</span>