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

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 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）