css - 以流畅的宽度围绕文本进行换行

Question

我在一个问题上停留了一段时间。我有一个 h1 元素，我需要一条线。像这样： ----- 文字 -----

页面的背景是一个图像，所以我不能只在我的 h1 元素上使用背景颜色来隐藏我的文本。

我设法用一个三列表得到了结果，但我需要为中心单元格设置一个宽度才能让它工作。

是否有可能让它与动态宽度一起工作？

提前致谢。

Answer 1

我会考虑使用 css 伪元素 :before 和 :after 在文本的任一侧添加行。

像这样的东西可能会起作用，但你将不得不玩：

.textWithLine:before {
    display:block;
    content: "";
    float:left;
    width: 300px;
    height: 1px;
    background: #000;
    margin:5px;
}
.textWithLine:after {
    display:block;
    content: "";
    float:right;
    width: 300px;
    height: 1px;
    background: #000;
    margin: 5px;
}​

如果您要在溢出设置为隐藏的容器中使用它，并且文本对齐中心会动态工作，但您必须玩一下才能使其完美。

Answer 2

感谢您的回答。似乎是个好主意，但我不知道如何让两个添加的块超出父块。这里的结果是要在标题下推送的 :after 块。

这是我的代码：

<div class="titre_bloc2">

     <h1>Title</h1>

</div>


.titre_bloc2 
{
position:absolute;
height:30px;
text-align:center;
width:100%;
overflow:hidden;
}   
.titre_bloc2 h1
{
border:1px solid white;
text-align:center;
display:inline-block;
}
.titre_bloc2 h1:before
{
width:300px;
height:20px;
border:1px solid blue;
float:left;
display:block;
content: "test";
}
.titre_bloc2 h1:after
{
width:300px;
height:20px;
border:1px solid blue;
float:right;
display:block;
content: "test";
}

Answer 3

最后用javascript完成了，当我可以避免它时我通常不喜欢使用它，但我想不出另一种方式，我的代码更干净。刚刚使用了一个普通的 hn 和一个由 jQuery 检测到的类。然后 : - 将标题放在 display:inline-block 中，这样块的宽度就和它的内容一样宽，以后我不能使用宽度。- 使用 align:center 将标题放回块中 - 标题由一个新的 div 包裹 - 我创建了两个新的 div，它们在计算应该使用的宽度后放置在标题周围

Answer 4

我有同样的问题，但我找到的大多数答案都不符合我的需要，直到我找到了 CSS 技术，用于在中间有单词的水平线。

该解决方案不使用任何 JS，几乎适用于任何情况。希望能帮助到你。

***** 编辑 ***** 这是我用于项目的代码。如果您有兴趣，可以在jtslegal.com上查看最终结果。我将它用于所有侧边栏小部件的标题。

<div id="widget_title">Request a Call</div>

#widget_title { overflow: hidden; padding: 10px 26px 0; }
#widget_title:after, #widget_title:before {
    content: '';
    display: inline-block;
    height: 1px;
    width: 100%;
    margin: 0;
    background: #999;
    text-indent: 20px;
    position: relative;
    vertical-align: middle;
}
#widget_title:after {
    left: .5em;
    margin-right: -100%;
}
#widget_title:before {
    right: .5em;
    margin-left: -100%;
}