在文本行之间添加行

时间:2015-05-21 16:50:20

标签: jquery html css

我正在尝试用完整的CSS创建这个记事本设计。

enter image description here

是否可以在文本行之间添加行?我不想要文本的下划线。例如,它会是这样的,但文本之间没有大的间距,因为整个文本将由用户添加,我不能在行之间添加跨度。

Text Text Text Text Text Text 
_____________________________
Text Text Text Text Text Text 

1 个答案:

答案 0 :(得分:2)

这种方法的典型方法是对包含实际文本的范围使用底部边框。 span容器被包装,它提供了所需的外观:

标记:

<div id="notebook">        
    <span id="text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </span>
</div>

造型:

div {
    border: 1px solid darkgray;
}
span {
    border-bottom: 1px solid darkgray;
}

这是一个小提琴:http://jsfiddle.net/9tut5gy0/

相关问题