Html 要在单行中显示的文本_Html_Css

Html 要在单行中显示的文本

html css

Html 要在单行中显示的文本,html,css,Html,Css,我需要在文本前后显示一个点和一条线的文本，如下面的屏幕截图所示文本应显示在一行中。这是我尝试的代码：。文本之前：文本之前{ 内容：“•”； } .课文前：课文后{ 内容：“；边框底部：1px纯黑；宽度：200px；位置：绝对位置；边缘顶部：7px； } .课文后：课文前{ 内容：“；边框底部：1px纯黑；宽度：200px；位置：绝对位置；边缘顶部：7px； } .课文后：课文后{ 内容：“•”； } 长文本这可能会对您有所帮助，只需编辑我使用的行即可 span:be

我需要在文本前后显示一个点和一条线的文本，如下面的屏幕截图所示

文本应显示在一行中。这是我尝试的代码：

。文本之前：文本之前{
内容：“•”；
}
.课文前：课文后{
内容：“；
边框底部：1px纯黑；
宽度：200px；
位置：绝对位置；
边缘顶部：7px；
}
.课文后：课文前{
内容：“；
边框底部：1px纯黑；
宽度：200px；
位置：绝对位置；
边缘顶部：7px；
}
.课文后：课文后{
内容：“•”；
}


长文本

这可能会对您有所帮助，只需编辑我使用的行即可

span:before{
内容：“•--------------”；
}
跨度：之后{
内容：“--------------”；
}

长文本

只需使用以下代码即可完成此操作： after和before伪将应用左右两侧的点，文本将与位置属性一起位于中间

*{
边际：0px；
填充：0px；
}
.text--行{
宽度：100%；
高度：1px；
背景：红色；
位置：相对位置；
线高：0px；
边缘顶部：20px；
文本对齐：居中；
}
.text--line:在{
内容：“•”；
位置：绝对位置；
左：0px；
顶部：0px；
z指数：2；
}
.text--第行：后面{
内容：“•”；
位置：绝对位置；
右：0px；
顶部：0px；
z指数：2；
}
.text--行跨度{
背景：#fff；
填充：0 5px；
}


我正在发短信

有时我会用这个：

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


span.words：：在{content:：•----“}之前
span.words：：在{content:'-•“}之后
你的文字在这里

但最有可能的是我不理解您的问题。

如果您不介意flex box，并且不需要完全相同的代码，您可以尝试以下方法：

.container{
显示器：flex；
对齐项目：居中；
}
.在文本之前，
.课文后{
位置：相对位置；
显示：块；
宽度：200px；
高度：1px；
背景：黑色；
显示器：flex；
对齐项目：居中；
}
.课文前{
调整内容：灵活启动；
}
.课文后{
证明内容：柔性端；
}
.文本之前：文本之前，
.课文后：课文后{
显示：块；
内容：“；
宽度：5px；
高度：5px；
边界半径：5px；
背景：黑色；
}


长文本

线与点重叠。点将越过线，只有您可以将左右调整为-1或-2px。。那不会有什么问题。。这个解决方案是灵活的，可以在任何设备上工作。是否可以用flex来做？你也可以只添加

背景色：白色；填充物：1px2px以覆盖重叠部分line@athimohan在什么意义上，您正在谈论使用flex？