需求
文字（数量是不确定的）所在行都得加上 下划线
思路：
给每一行都添加一个行高 比如行高：30 在30 60 90 120 这个位置加线条就行
效果：
clientHeight 是啥？
developer.mozilla.org/en-US/docs/…
clientHeight这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算
会把border 的宽度 也计算在div的宽度内
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
box-sizing: border-box;
line-height: 30px;
margin: 0 auto;
margin-top: 100px;
width: 300px;
height: 500px;
background-color: beige;
padding: 0px 16px;
border: 1px solid seagreen;
position: relative;
word-wrap: break-word;
word-break: break-all;
}
.line{
position: absolute;
height: 1px;
background-color: black;
width: calc(100% - 32px);
/* top不一样 */
}
</style>
</head>
<body>
<div class="content">
<div class="str">
I am a good boy, hahahahhahahahahahaha everyone likes me...
hjjjjjjjjkftyuguhujhvcgbhhjhuiukjuy\
rSZTAhgjghhhhh
hhhhhhhhhhhhh
hhhhhhhhhhxsd
awrdrtopopjkliuhfrdrsiuuft
yddyguhijhoii
</div>
</div>
</body>
<script>
function addLine(){
const lineHeight = 30;
// var content = document.querySelector('.content').clientHeight
var content = document.querySelector('.content')
//console.log(content)
let str = document.querySelector('.str').clientHeight
console.log(str)
for(let h = 30;h <= str;h+= lineHeight){
// console.log(h)
var line = document.createElement('div')
console.log(line)
// line.style.top = h
// line.style.className = 'line'
line.className = 'line'
line.style.top = `${h}px`
content.appendChild(line);
}
}
addLine()
</script>
</html>
