我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
这为您提供了固定的线条长度,但效果很好。 行长可以通过添加或取'\00a0' (unicode空格)来控制。
H1:前,H1:后{ 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 '; 文字修饰:线穿过; 保证金:自动0.5em; } <标题>边线h1 > < /
其他回答
我一直在寻找这个简单的装饰的一些解决方案,我发现了相当多的,一些奇怪的,一些甚至用JS来计算字体的高度和bla,bla,bla,然后我读了这篇文章,读了一个评论从thirtydot谈到fieldset和传说,我认为这就是它。
我重写了这2个元素样式,我猜你可以复制它们的W3C标准,并将其包含在你的.middle-line-text类(或任何你想叫它的)中,但这是我所做的:
<fieldset class="featured-header">
<legend>Your text goes here</legend>
</fieldset>
<style>
.featured-header{
border-bottom: none;
border-left: none;
border-right: none;
text-align: center;
}
.featured-header legend{
-webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
-webkit-padding-end: 8px;
background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
font-weight: normal; /* I preffer the text to be regular instead of bold */
color: YOU_CHOOSE;
}
</style>
这是小提琴:http://jsfiddle.net/legnaleama/3t7wjpa2/
我玩了边界样式,它也可以在Android;)(在kitkat 4.XX上测试)
编辑:
遵循Bekerov Artur的想法,这也是一个不错的选择,我已经改变了。png base64图像创建一个。svg的笔画,这样你就可以在任何分辨率渲染,也可以改变元素的颜色,而不需要任何其他软件的参与:)
/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}
这可能有点超出了问题的范围,但我相信这确实有助于其他有类似问题的人。
如果您需要多个单元格,并且不想显式地指定背景颜色,则必须对行的每个部分使用标记。
这允许你使用一个完整的伸缩线来定位元素,例如扩展器
.title-hr { 宽度:100%; vertical-align:中间; 对齐项目:中心; text-align:开始; 显示:flex; } .title-hr >跨度{ 填料:0 0.4em; } .title-hr >。人力资源{ Border-bottom: 1px实心#777; 行高:0.1 em; 保证金:0.34em 0 0.35em; Flex: 1台自动; } .title-hr > .hr。修复{ Flex: 0 1自动; } < div class = " title-hr”> < span > + < / span > <span class="hr fix"></span> 标题< span > < / span > < span class = "人力资源部" > < / span > < / div >
这大概就是我要做的:通过设置包含h2的border-bottom来创建行,然后给h2一个较小的行高。然后将文本放在具有非透明背景的嵌套span中。
h2 { 宽度:100%; text-align:中心; Border-bottom: 1px实心#000; 行高:0.1 em; Margin: 10px 0 20px; } H2跨度{ 背景:# fff; 填充:0 10 px; } <h2><span>THIS IS A TEST</span></h2> <p>这是一些其他的内容</p>
我只在Chrome上进行了测试,但没有理由它不能在其他浏览器上运行。
JSFiddle: http://jsfiddle.net/7jGHS/
最短最佳方法:
跨度:之后, 跨度:{之前 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0”; 文字修饰:线穿过; } <span>你的文本</span>
对我来说,这个解决方案非常有效……
HTML
<h2 class="strikethough"><span>Testing Text</span></h2> .
CSS
.strikethough {
width:100%;
text-align:left;
border-bottom: 1px solid #bcbcbc;
overflow: inherit;
margin:0px 0 30px;
font-size: 16px;
color:#757575;
}
.strikethough span {
background:#fff;
padding:0 20px 0px 0px;
position: relative;
top: 10px;
}