要在一行中显示的文本

-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

要在一行中显示的文本

回答

相关问题