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

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 宇视监控服务器无法登录
  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥15 DruidDataSource一直closing
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据，但连接进去后显示表无数据