Question

我已经坚持了一段时间了。我有一个h1元素，我需要à行。像这样： -----文字-----

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

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

是否有可能让它以动态宽度工作？

提前致谢。

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

感谢您的回答。看起来像一个好主意，但我无法弄清楚如何让两个添加的块超出父块。这里的结果是：在标题下按下块之后。

这是我的代码：

<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检测到的类。然后： - 标题显示：内联块，这样块只有它的内容宽，我以后不能使用宽度。 - 使用align：center将标题放回块 - 标题由新div包装 - 我创建了两个新的div，它们在计算出应该使用的宽度之后放在标题周围

Answer 4

我有同样的问题，但我找到的大多数答案都不符合我的要求，直到找到CSS technique for a horizontal line with words in the middle。

此解决方案不使用任何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%;
}

获取具有流体宽度的文本

4 个答案: