CSSで調整可能な水平線。

Question

私はCSSで調整可能な水平線を達成する方法を知りたいと思います。

HTML

<div class="col-12 d-flex justify-content-around title"> 
    <span style=" flex-shrink: 3;" class="align-self-center"></span> 
    <h5> content here </h5> 
    <span style=" flex-shrink: 3;" class="align-self-center"></span> 
</div> 

CSS

.title span { 
    height: 1px; 
    background: rgba(255,255,255,0.3); 
    width: 33%; 
} 

コンテンツが短い場合、それは非常に完璧に見えます。

しかし、コンテンツが長すぎます。このように混乱するでしょう。 CSSで調整可能な線を作る方法はありますか？

ありがとうございました

Answer 1

これはあなたを助けます。あなたはテキストのみに拡張したい場合はhere

.title span { 
 
    height: 1px; 
 
    background: rgba(255,255,255,0.3); 
 
    width: 33%; 
 
} 
 
hr{ 
 
    margin:60px 0px; 
 
    width:100%; 
 
} 
 
h5{ 
 
    position:absolute; 
 
    margin:0px auto; 
 
    background-color:white; 
 
    padding: 20px 30px; 
 
    font-size:20px; 
 
} 
 
.vcenter{ 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content: center; 
 
}

<div class="vcenter"> 
 
    <hr> 
 
    <h5> content here which is like very long and cant handle it </h5> 
 
</div>

：ちょうど要素h5ためbackground-colorは、ページの背景

JSFiddleと同じでなければならないことに注意してください特定の制限とテキストを中心にする必要があります以下の例を確認してください。

.title span { 
 
    height: 1px; 
 
    background: rgba(255,255,255,0.3); 
 
    width: 33%; 
 
} 
 
hr{ 
 
    margin:60px 0px; 
 
    width:100%; 
 
} 
 
h5{ 
 
    position:absolute; 
 
    max-width:300px; 
 
    text-align:center; 
 
    margin:0px auto; 
 
    background-color:white; 
 
     padding: 3% 5%; 
 
    font-size:20px; 
 
    max-width:300px; 
 
} 
 
.vcenter{ 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content: center; 
 
}

<div class="vcenter"> 
 
    <hr> 
 
    <h5 class="vcenter"> content here which is like very long and cant handle it </h5> 
 
</div>

Answer 2

ここでバーのフレキシボックスと擬似クラスを使用して簡単な方法です - コンテナの内部には、トリックやただ一つの要素は。

div { 
 
    display: flex; 
 
    line-height: 30px; 
 
} 
 

 
div::before, 
 
div::after { 
 
    content: ''; 
 
    flex: 1; /* expand lines as much as possible */ 
 
    background: #ccc; 
 
    height: 2px; 
 
    margin-top: 14px; /* center 2px within 30px line height */ 
 
} 
 

 
span { 
 
    padding: 0 1em; /* slight padding between line and text */ 
 
}

<div> 
 
    <span>Text of any size</span> 
 
</div>