Question

如何使用笔记本中的行创建跨度。当文本添加到span时我希望行在那里。

我附加了

之类的文字

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

我尝试在css上使用下划线，但问题是跨度没有取整个父宽度。

也尝试使用border-bottom，但没有得到我想要的东西。

所需输出：我在跨度上附加文字。有时不是文字。我想要的是没有文本跨度应该有行。准确地说是10行。当我添加行时，文本下面应该有行。并且根据文本行，行应该附加到跨度，以便总是有10行。

仅供参考：跨越多行并带有下划线

使用上面的搜索，但也许我正在以错误的方式看待它。

任何建议都是适用的。（请不要只插入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 1

您还可以使用repeating-linear-gradient作为行。在这种情况下，您还需要注意line-height和渐变大小。例如，.lines的行高等于21px（14 * 1.5），因此渐变大小也必须为21px：透明空间为20px，行为1px。您可以将行的颜色更改为任何没有问题的颜色

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

Answer 2

背景图片按建议加下划线。

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

<强>风格

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

Fiddle

注意：行高＆amp;图像高度需要相同。

10 行 -

line-height为16px，因此div height应为160px。

Answer 3

也许您可以尝试使用JS函数与<hr>一起使用，该函数会在每X个单词中插入它，并使用简单的CSS调整您的<hr>，以便在文本下方对齐它。

<hr class='line'>

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

希望有所帮助

跨越线条jquery

3 个答案: