html中如何让用css实现word中生成几行空白下划线占位，就像打印出来的纸张留着的几行下划线让人填写

Question

html中如何让用css实现word中生成几行空白下划线占位，并且有文字的时候保证文字在下划线上面，并且下划线位置不变，如下图

Answer 1

直接设置底部边框和高度即可，例如

<div class="cn">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

<style>

.cn{width:800px; margin:auto;}

.cn span{border-bottom:1px #BDBCBC solid; height:30px; display:block;}

</style>

效果如下

追问

如果是在程序上填写内容的话,那不是要判断每一行的文字数量，一行满了再插入下一行，可不可以直接像你的效果图那样，但是在程序上插入内容的时候会自动换行，并且下划线位子不变。