蹦豆蹦 2022-01-18 11:03 采纳率: 50%
浏览 96
已结题

span标签里面的内容过多会换行,如何对每一行数据给他添加行线

问题遇到的现象和发生背景

img

问题相关代码,请勿粘贴截图
<div class="opinionDiv">
<span class="textStyle">测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过</span>
</div>

.opinionDiv {
  height: calc(100vh - 345px);
  overflow-y: auto;
  font-size: 16px;
}
.textStyle {
  line-height: 40px;
  text-decoration:none;
  border-bottom:1px dashed #3d3d3d;
  display: inline-block;
  text-indent:2em;
  width: 100%;
}
运行结果及报错内容

span标签内只有最外层能够设置border-bottom

我的解答思路和尝试过的方法

计算宽度,再根据宽度截取字符串的长度,但是字符串中不知有中文,还有数字、字母、下划线等等,做出的效果并不好

我想要达到的结果

span标签内可以添加属性,加入行线

  • 写回答

3条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2022-01-18 14:01
    关注
    <!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>
    </head>
    <style>
    
    </style>
    
    <body>
        <div id="box" style="line-height: 30px;position: relative;height: 500px;padding: 0 10px;border:1px solid black">
            <span>测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过测试用,再次通过
            </span>
        </div>
    </body>
    <script>
        const box = document.getElementById('box')
        const height = box.clientHeight
        const lineHeight = box.style.lineHeight.split('px')[0]
        const needLine = Math.floor(height / lineHeight)
        for (let i = 0; i < needLine; i++) {
            const line = document.createElement('span')
            line.style = `border-bottom: 1px solid black;position:absolute;height:30px;left:0;width:100%;top:${30 * i}px`
            box.appendChild(line)
        }
    </script>
    
    </html>
    

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 1月27日
  • 已采纳回答 1月19日
  • 创建了问题 1月18日

悬赏问题

  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯,灯的闪烁很不稳定,经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序