类似笔记本的自适应内容通体下划线
我们来看这个小伙伴的问题
他是想给这个容器里面的每行
加上下划线
但是注意这里面：即使那行有一个文字
比如说这样
他也要把一整行都加上下划线
而且呢
没有文字的“行”不需要下划线 （口误 说成了：没有文字的地方）
那我们来试一下哈
首先呢
既然它（一个字的行后面）没有文字的地方也要下划线
那我们用传统的 css
去给文字加下划线肯定是不行了
所以呢我们要换其他的方式
那我们就可以自己去画线
那怎么能保证让这些线
正好画在每一行的文字下边呢
这个就需要我们先去设置好line-height
我们保证每一行的高度都是一样的
比如说30像素
好大家看这回每一行都是30像素了
那这样的话呢我们就可以在
30、60、90 的地方去画线
我们先画一条线试一下
我在这里画一个 d iv
class="line"
好然后呢我再写一个样式
它的高度就是1像素
其实也就是线的宽度（粗细）
那宽度（width）呢
就是这个线的长度呢
我们用百分之百（先）
然后呢给这个加个颜色我们用黑色
然后呢 position - 我们要用绝对定位
绝对定位的话上面（外层容器）就要改成相对定位
然后下边我们先写一个
30的位置看一下
好大家看
这个长超了
那是因为他上面有padding
（左右有10像素的padding）
所以我们把这个 20 减掉
减去20
px
好，大家看！这是30
然后呢 60、90、120
150 大家看这都没有问题
那接下来就产生了新的问题
我们这些线应该画到哪一行截止
因为空白的地方是不需要画线的
要解决这个问题
我们就要拿到里面文字一共占了多高
那这个就比较复杂
大家看这里边文字是动态的
（我先把这个去掉）
也就是说：这里边文字而且是自动换行的
你不知道他 撑宽/撑高 了几行
这个很难计算
那我们有什么办法吗
可以这样：我们再来一个 div
这个 div
里边的 div 就不设置高度了
让他自动被撑高
比如说他就叫 str
那我们取一下这个 str 的高度哈
我们在控制台里取吧
document.querySelector('.str').clientHeight
大家看！现在是120
我把它少一点
再来一下30
也就是说：说这样的话
我们就可以利用这个 「div 是被撑高」的原理
去拿到里面文字有多高
好我们这回就可以用 js 来控制了
我们先写一个function
叫：loadLine()
也就是说
这个方法专门是画线的方法
让我们在下边调一下
方法里怎么写呢
首先我们先声明一个常量
人
嘿
这很重要！就是每一行的高度现在是30
然后呢我们拿到这个容器！var...
content
等于：document.querySelecotr
点
好然后呢再拿到容器里的这个 str
好
拿到这两个之后我们就可以用循环了
循环
然后：var h
这个 h 就是
30、60、90、120 ...
所以我们就是 h 等于从30开始 （这里应该改为：var h = lineHeight）
然后呢 h 小于等于
str.clientHeight
然后 h 每次加 lineHeight
加等于
然后我们先打印一下
h
测一下，大家看：30、60、90、120
然后把文字改少点
30、60、90
再少点：30、60
那接下来就简单了
我们可以直接在这里边去画线了
document.createElement
创建一个 div
然后呢把它赋值给line
接下来呢：line.className
等于
line
我们把上面这个样式的 top 去掉
因为其他的
每一条线这些样式都是一样的
只不过 top 不一样
所以呢我们在这设一个 top
点 style 点
top 等于这里边用这个
h
px
然后呢把line放到content里面
appendChild 放到这个元素里边
好我们试一下
它这个粗细（不一致）
我们不管它是因为缩放（为了录屏）的原因
我把它比如缩小一点，大家看！就没问题了
然后呢我们把内容改一改
加多点
大家看
一行
好这样就解决了
今天就到这里谢谢大家
最后更新于