问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用纯CSS实现自适应文字内容的分割线？

头像
zhuzi
    12146

    有以下DOM结构：

    <h1>
    <span>
        <span>
            文字内容
        </span>
    </span>
</h1>

h1{
    width:100%;
    padding:20px;
}

    要求:不能改变DOM结构，不能改变h1的已有样式；

    实现： ---------- 文字内容 ----------- (左右两侧padding + 左右分割线宽度 + 文字内容宽度 = h1宽度)

    1. 左右侧分割线自动适应h1除文字内容以外的剩余空间，文字内容变化，分割线也应根据文字内容变长或缩短；

    2. 文字只占一行；

    除了用span背景遮住h1伪类分割线，还有其他方法吗？

    关键是这个自适应很难搞。

    csshtmlhtml5javascript
    阅读 7.7k
    7 个回答
    得票最新
    头像
    一帆
      17628
      ✓ 已被采纳
      头像
      新しい世界
        1.5k2621

        其实你 HTML 结构只需要 h1>span 这样就够了

        大体思路是：

        1. 内层的 <span> 设置背景色，用于遮挡

        2. 外层 <span> 画线，这里画线可以用伪元素，也可以用线性渐变渐变背景图

        头像
        笑看风云plus
          195413

          第一种方法（你的意思，好像是说不想用这一种）

          <div class="line-wrap">
    <span class="text">文字内容</span>
</div>

<style>
    .line-wrap{
        position: relative;
        text-align:center;
    }
    .line-wrap::after{
        position:absolute;
        left:0;
        top:50%;
        border-top:1px dashed #ddd;
        content:'';
        height:0;
        width:100%;
        z-index:1;
}
.line-wrap .text{
    background-color:#fff;
    padding:5px;
    position: relative;
    z-index:2;
}
</style>

          第二种方法

          <style>
    .line-wrap{
        text-align:center;
        overflow:hidden;
    }
    .line-wrap .text{
        background-color:#fff;
        padding:5px;
        position: relative;
    }
    .line-wrap .text::before,
    .line-wrap .text::after{
        position:absolute;
        top:50%;
        border-top:1px dashed #ddd;
        content:'';
        height:0;
        width:9999px;
    }
    .line-wrap .text::before{
        right:100%;
    }
    .line-wrap .text::after{
        left:100%;
    }
</style>

<div class="line-wrap">
    <span class="text">文字内容</span>
</div>
          头像
          StinsonZhao
            3.5k22131

            用js去获取“文字内容”的宽度，然后计算两边分割线应在的div的宽度并设置，用最多的“-”填充，超出部分overflow：hidden

            头像
            dengzw
              141

              <fieldset >< legend>文本内容</legend></fieldset>

              头像
              wangna
                8021525
                <style>
.line {
    padding: 0 20px 0;
    margin: 20px 0;
    line-height: 1px;
    border-left: 200px solid #ddd;
    border-right: 200px solid #ddd;
    text-align: center;
}
</style>

html
<div class="line">小小分隔线 单标签实现</div>
                头像
                _曾祥良
                  11
                  新手上路，请多包涵

                  效果

                  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1 {
            position: relative;
            top: 0;
            left: 0;
            width: 500px;
            overflow: hidden;
            margin: 0 auto;
            color: #f00;
        }
        
        h1 span {
            position: relative;
            top: 0;
            left: 0;
            /* background: #ff0; */
        }
        
        h1 i {
            position: absolute;
            top: 50%;
            width: 2000px;
            height: 1px;
            background: #f00
        }
        
        h1 i.right {
            left: 110%;
        }
        
        h1 i.left {
            right: 110%;
        }
        
        h1.demo2 {
            text-align: center;
        }
        
        .h1left {
            text-align: right;
        }
    </style>
</head>

<body>
    <!--可以用:before、:after代替两个多余的标签，兼容IE8及以上、手机端-->
    <h1>
        <span>
            我是标题
            <i class='right'></i>
        </span>
    </h1>
    <h1 class="h1left">
        <span>
            我是标题
            <i class='left'></i>
        </span>
    </h1>
    <h1 class="demo2">
        <span>
            我是标题我是标题
            <i class='right'></i>
            <i class='left'></i>
        </span>
    </h1>
    <h1 class="demo2">
        <span>
            我是标题我
            <i class='right'></i>
            <i class='left'></i>
        </span>
    </h1>
    <h1 class="demo2">
        <span>
            MY
            <i class='right'></i>
            <i class='left'></i>
        </span>
    </h1>
</body>

</html>
                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题