有关 css 方面的问题，三列布局，中间不定宽自动改变宽度，两边自适应。

Question

希望得到大家的帮助~
需要实现一个这样的效果：

中间的内容可以是 React 组件，可以是文字等任意的东西，提前不知道它的宽度值。
两边的线等长，随着中间的内容增加或者减少进行改变，但是和中间的文字总是保持一定的间隔。

总结起来就是三列布局，中间内容不定宽，两边内容等宽，且可以自适应中间内容宽度的变化。

目前自己可以实现中间内容定宽的情况，但是不定宽的情况却做不出来，希望大家提供一些思路，感谢大家。

<div class="horizontalLineWithContent">
    <span class="horizontalFirstAdditionalLayer"></div>
    "AND"    <span class="horizontalFirstAdditionalLayer"></div><div>

html 部分考虑到 React 无法操作伪元素，所以将伪元素换成了 span 标签

.horizontalLineWithContent {    position: relative;    margin: 1em auto;    text-align: center;    color: #eee;
    .horizontalFirstAdditionalLayer, .horizontalSecondAdditionalLayer{        position: absolute;        border-top: 1px solid #eee;        top: 50%;
    }    .horizontalFirstAdditionalLayer {        left: 0;
    }    .horizontalSecondAdditionalLayer {        right: 0;
    }
}

希望大家多多提供思路，多谢各位啦~~

Answer 1

有考虑and背景因素吗？如果不考虑背景的话可以这样做：<body&nbsp;style=" &nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;border-top:&nbsp;1px&nbsp;solid; "><span&nbsp;style=" &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;-10px; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;white; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0&nbsp;10px; ">and</span></body>当然这只是方法之一，其它方法还有的，我再想想再来