文字内容

用flex吧
https://jsfiddle.net/opym5zd6/

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

大体思路是：

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

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

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

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

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

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

<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>

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

<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
<p class="line">小小分隔线 单标签实现</p>