CODEWITHSUNDEEP
jqueryhtmlcss
Brownman Revival
Brownman Revival

Reputation: 3850

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>

Upvotes: 3

Views: 216

Answers (3)

t1m0n
t1m0n

Reputation: 3431

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>

Upvotes: 3

Sougata Bose
Sougata Bose

Reputation: 31749

A background image underline as suggested. 

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>

Style

div {
    height: 160px;
    width:100%;
    line-height: 16px;
    background: url("http://underscorejs.org/favicon.ico") repeat;
}

Fiddle

Note: The line-height & the image height needs to be same.

For 10 lines -

line-height is 16px, so the div height should be 160px.

Upvotes: 2

Anthony Vincent
Anthony Vincent

Reputation: 26

maybe you could try to play with <hr> with a JS function which inserts it every X words and adjust your <hr> with a simple CSS to align it just under your text.

<hr class='line'>

.line{
    position: relative;
    top: -5px; /* Something like that */
}

Hope it helps

Upvotes: 1

Related Questions