[下划线]换行自适应稿纸完美方案

忙了一个多月了，最近几天休息整理下前段时间遇到的问题之一：下划线。

我们最终显示的效果为最少十行空白带线行稿纸，呃呃呃说的有点凌乱我贴个图上来

大概就是这个意思，如果使用Web的字体的下划线的话不能满足这个需求，于是一个后台开发人员开始了他逗比的一下午。
。。。。
怎么办呢？

。。。。

空格？

。。。。。

手动留白？

。。。。
后台拼接
。。。

我好方啊！

。。。。。。

放弃吧。。。。

。。。。。

看看老外怎么弄的。。

。。。。。

没有，我居然菜刀搜索都不会。我该用什么关键字，我觉得搜索技巧也应该算做一门课程。

。。。。。

无果。。。。自己抠吧，

我突然想到固定行高的情况下CSS是不是可以实现，于是乎先打开的PS做了个点，这个点很关键，像素大小，颜色，行高留白，会直接影响你的线的显示。二流的PS还是做了一个点，大概是这样

我贴出我的事例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TEXT</title>
    <style>
        .inner_line_div{
            width: 50%;
            margin: 0px auto;
            word-break:break-all;
            min-height: 100px;
            background-image: url("bg_03.png");
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <h1>下划线问题</h1>

    <div class="inner_line_div">
        AAAAAAAAAAAAAAAA
    </div>
</body>
</html>

我用他作为DIV的背景并且横向纵向平铺然后设置每行的行高，于是出现了这样的效果

哈哈问题完美解决，开森。
我贴下代码下载地址：点击下载

写的不是很好，请大家多提宝贵意见，有什么问题，咱们一起交流学习。

我的邮箱：yuzhen1912@163.com QQ 674433027

手写不容易，转载请注明出处：http://www.cnblogs.com/flyingMonkey/p/5429782.html

posted on 2016-04-25 09:42 爱小清新真好阅读(1201) 评论(0) 编辑收藏举报