jquery - 跨越行jquery

Question

如何像在笔记本中那样用线条创建跨度。当文本被添加到跨度时，我希望这些行在那里。

我正在附加像

这样的文本

$('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>