要在一行中顯示的文本

-3

我需要在文本前後顯示帶點和文本的文本，如下面的屏幕截圖所示。要在一行中顯示的文本

文本應顯示在一行。這是我試過的代碼：

.before-text:before { 
 
    content: "•"; 
 
} 
 

 
.before-text:after { 
 
    content: ""; 
 
    border-bottom: 1px solid black; 
 
    width: 200px; 
 
    position: absolute; 
 
    margin-top: 7px; 
 
} 
 

 
.after-text:before { 
 
    content: ""; 
 
    border-bottom: 1px solid black; 
 
    width: 200px; 
 
    position: absolute; 
 
    margin-top: 7px; 
 
} 
 

 
.after-text:after { 
 
    content: "•"; 
 
}

<span class="before-text"></span> 
 
<div>Long long long text</div> 
 
<span class="after-text"></span>

來源

2017-05-04 athi

如果你不介意的柔性框，你不需要完全相同的代碼，你可以嘗試以下方法：

.container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.before-text, 
 
.after-text { 
 
    position: relative; 
 
    display: block; 
 
    width: 200px; 
 
    height: 1px; 
 
    background: black; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.before-text { 
 
    justify-content: flex-start; 
 
} 
 

 
.after-text { 
 
    justify-content: flex-end; 
 
} 
 

 
.before-text:before, 
 
.after-text:after { 
 
    display: block; 
 
    content: ""; 
 
    width: 5px; 
 
    height: 5px; 
 
    border-radius: 5px; 
 
    background: black; 
 
}

<div class="container"> 
 
    <span class="before-text"></span> 
 
    <div>Long long long text</div> 
 
    <span class="after-text"></span> 
 
</div>

來源

2017-05-04 04:38:35

這可以幫助你，只是編輯我用線

span:before { 
 
    content: "•----------------"; 
 
} 
 

 
span:after { 
 
    content: "----------------•"; 
 
}

<span>Long long long text</span>

來源

2017-05-04 03:40:48 Swellar

你可以只需使用以下代碼即可：後和前僞適用於左，右和文字會在位置屬性中心..

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.text--line { 
 
    width: 100%; 
 
    height: 1px; 
 
    background: red; 
 
    position: relative; 
 
    line-height: 0px; 
 
    margin-top: 20px; 
 
    text-align: center; 
 
} 
 

 
.text--line:before { 
 
    content: "•"; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: 2; 
 
} 
 

 
.text--line:after { 
 
    content: "•"; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0px; 
 
    z-index: 2; 
 
} 
 

 
.text--line span { 
 
    background: #fff; 
 
    padding: 0 5px; 
 
}

<div class="text--line"> 
 

 
    <span>I am text</span> 
 
</div>

來源

2017-05-04 03:41:57

該生產線是重疊的點。 – athi

點將通過線只有你可以左右調整到-1或-2px ..這不會有任何問題..這種解決方案是靈活的，可以在任何設備上工作。 –

是否可以用flex做到這一點？ – athi

Somethimes我用這點：

<html> 
    <head> 
     <style> 
     span.words::before {content: "•--------"} 
     span.words::after {content: "--------•"} 
     </style> 
    </head> 
<body> 
    <span class="words">your text here</span> 
</body> 
</html>

但最可能的是我不明白你的問題。

來源

2017-05-04 03:46:04

要在一行中顯示的文本

回答

相關問題