# 类似笔记本的自适应内容通体下划线 * 抖音： * B站： 我们来看这个小伙伴的问题 他是想给这个容器里面的每行 加上下划线 但是注意这里面：即使那行有一个文字 比如说这样 他也要把一整行都加上下划线 而且呢 没有文字的“行”不需要下划线 （口误 说成了：没有文字的地方） 那我们来试一下哈 首先呢 既然它（一个字的行后面）没有文字的地方也要下划线 那我们用传统的 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 放到这个元素里边 好我们试一下 它这个粗细（不一致） 我们不管它是因为缩放（为了录屏）的原因 我把它比如缩小一点，大家看！就没问题了 然后呢我们把内容改一改 加多点 大家看 一行 好这样就解决了 今天就到这里谢谢大家 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sunzsh.gitbook.io/xiaoshan.bug/lei-si-bi-ji-ben-de-zi-shi-ying-nei-rong-tong-ti-xia-hua-xian.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.