CSS 挑战，我可以在不引入更多 HTML 的情况下做到这一点吗？ [复制]

Posted 2023-03-05

【中文标题】CSS 挑战，我可以在不引入更多 HTML 的情况下做到这一点吗？ [复制]

【英文标题】：CSS challenge, can I do this without introducing more HTML? [duplicate]

【发布时间】：2012-09-20 20:10:24

【问题描述】：

想象一下，我有任何带有文本的块或内联块。就像一个段落或里或任何东西。如果该标签具有“分隔符”类，我希望它如下所示：

所有内容都居中（text-align:center; 就足够了）。 这是棘手的部分：在居中内容的两侧，会出现一条（垂直居中）线。

下图说明了我的想法：

如果我必须介绍更多 HTML，那就别管它了 - 不感兴趣。

我是一个长期的 CSS 用户，但我无法弄清楚这一点......还有其他人有想法吗？尽管我很喜欢它，但最好不要使用 CSS3（为了工作......由于兼容性，不能使用新东西）..

示例问题：<p class="separator">CENTRE ME</p>

【问题讨论】：

为线条使用背景图片？

那会在文本内容的后面

我知道如何添加跨度。有兴趣吗？

我可以自己做，挑战是在不添加任何 html 的情况下做到这一点。无论如何谢谢:)

***.com/questions/2812770/…

【参考方案1】：

这适用于 Firefox：

.separator 
    text-align: center;
    height: 0.5em;
    border-bottom: 2px solid black;
    margin-bottom: 0.5em;

.separator:first-line 
    background-color: white;

JSFiddle Demo

【讨论】：

哇这真的很接近！这是更新：jsfiddle.net/LyKtp/1

尼尔值得大家干得好jsfiddle.net/LyKtp/2

@2unco 十六进制非中断空格！检查它：jsfiddle.net/gionaf/aSwhE :)

@2unco 在 .separate 上使用 position:relative;：jsfiddle.net/gionaf/shMCU

@PKHunter line-height:0 适用于任何浏览器 ;-)

【参考方案2】：

我开发了一个不依赖background: white 的解决方案，也就是说，您可以看到分隔符文本后面的内容。只需运行示例，您就会看到：

忽略此图中所有那些杂乱无章的标签...这是一个 CSS 示例，而不是组织示例。

.separator>*
  display: inline-block;
  vertical-align: middle;

.separator 
    text-align: center;
    border: 0;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;

.separator:before, .separator:after 
    content: "";
    height: 2px;
    width: 50%;
    background-color: gray;
    margin: 0 5px 0 5px;
    display: inline-block;
    vertical-align: middle;

.separator:before 
    margin-left: -100%;

.separator:after 
    margin-right: -100%;

<div class="texture texture1 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture2 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture3 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture4 light-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>

<style>
  
/**

STYLES TO MAKE THE BACKGROUND HAVE PATTERNS WHICH ARE NOT SOLID WHITE,
SO THAT YOU CAN SEE THAT IT IS VISIBLE BEHIND THE SEPARATOR.

**/

.light-theme .separator:before, .light-theme .separator:after 
  background-color: black;

.light-theme .separator, .light-theme .separator 
  color: black;

.dark-theme .separator:before, .dark-theme .separator:after 
  background-color: white;

.dark-theme .separator, .dark-theme .separator 
  color: white;


.texture 
  padding: 10px;


.texture3 
  background-color: red;
  color: white;


.texture1 
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgb(255, 255, 255);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background: -moz-linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -moz-linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background: linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 20px 20px;
  background-size: 20px 20px;


.texture2 
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgb(255, 255, 255);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(0deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), -webkit-linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  background: -moz-linear-gradient(90deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), -moz-linear-gradient(90deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), -moz-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), -moz-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  background: linear-gradient(90deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
  background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;


.texture4 
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgba(255,255,255,1);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background: -moz-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background-position: auto auto;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 50px 50px;
  background-size: 50px 50px;

</style>

P.S.：我使用的背景示例不是我的创作。我在enjoycss.com 得到了它们。红色的背景，嗯，这也不是我的创作，也不是他们的……没有人的创作，也许吧。谁创建了red...我不知道。如果你这样做了，而我没有给予信任，请在 cmets 中留言。

【讨论】：

哇，令人印象深刻！你把它从死里复活……又杀了它！因此，如果我理解正确，它使用了nowrap 和overflow: hidden，因此之前/之后的那些行比它们需要的长，但你看不到。很棒的东西，垂直对齐也做得很好！如果您打算使用更长的名称，nowrap 会在混合中加入一点 HTML，但如果您知道这对您来说不会是问题，这是一个很大的进步并且非常有用。

这绝对应该是公认的答案，太棒了。谢谢你。

【参考方案3】：

很抱歉打断你，但在 HTML/CSS 中，如果不引入至少一个额外的标签，就无法做到这一点。

唯一可以近似的方法是使用 :before 和 :after 伪类，但它无法插入 html 内容，更不用说根据内容具有可变宽度的内容了。

【讨论】：

我担心会是这样。我讨厌它，但我可能不得不点击这个答案！希望一些天才会带来一些荒谬的解决方案。我会给它一天的时间。

【参考方案4】：

你去吧：

<p class="separator"></p>

p.separator 
    line-height:1em;
    border-bottom:1px solid red;

p.separator:before 
    content:"TEXT";
    position:relative;
    left:50%;
    margin-left:-2.5em; /* half the number of chars */
    padding:0 0.3em;
    top:0.5em;
    background:white;

Demo​

【讨论】：

警告：不将标签的内容用于文本...

@TorValamo 我可以解决 ;-) 只需几秒钟

哈哈，这很酷 :) 但不是答案 :( 正如 Tor Valamo 所说，需要使用标签的内容 - 我终于在问题中添加了一个示例问题来解决它：CENTRE ME。尽管竖起大拇指

如果你愿意把 CENTER ME 放在一个属性中，比如

很遗憾不会这样做。让我们拭目以待，看看人们会想出什么:)

【参考方案5】：

您可以为线条使用背景图像，然后为文本提供一系列黑色文本阴影以模拟 2-3 像素的笔触，覆盖文本周围和文本之间的背景。

即。 CSS Font Border?

http://jsfiddle.net/4mPkU/ - 示例

基于文本阴影支持的向后兼容性将是一个问题。 （有一个 IE 过滤器可能有助于提高兼容性）。

【讨论】：

附言。对此进行了测试，它非常有效。

你认为你可以为此制作一个 jsfiddle 吗？检查了该链接，现在我不确定我是否在同一页面上。接受答案的 cmets 可能会让您对我正在寻找的内容有更多的了解（尤其是后来的 cmets）

添加了一个例子。只是重新阅读原始问题并注意到您确实说没有 CSS3，所以这个解决方案可能并不理想。然而，有趣的解决方案。但是我确实想到了，如果“单独”元素总是包含相同的单词，为什么不使用白线中有足够间隙的背景图像呢？是否需要适应不同的宽度？

是的，不同的宽度，理想的一切都不同

【参考方案6】：

.center-separator 
    display: flex;
  line-height: 1em;
  color: gray;


.center-separator::before, .center-separator::after 
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  

https://jsfiddle.net/0Lkj6wd3/

【参考方案7】：

要使某些东西动态化，您可以执行以下操作：

<ul>
    <li>
        <div class='lineLeft'></div>
        <div class='inlineText'></div>
        <div class=lineRight'></div>
    </li>
</ul>

基本上在这里，您可以将“inlineText”div 设置为居中（不必是 div，现在只是一个想法），然后“lineLeft”和“lineRight”都将设置为向左浮动/相应地，将高度设置为父列表项标签高度的一半。然后在css中给每个侧div一个底部边框。

这是我能想到的最具活力的解决方案。它的 HTML 有点多，但假设您可以正确调整所有内容的大小，它会正确地实现您的目标。

让我们知道。祝你好运。

【讨论】：

是的，我自己做到了这一点，但我对必须添加更多 HTML 的事实并不满意。我是一个完美主义者，哈哈，对此感到抱歉-寻找最佳解决方案。我希望我不必求助于这样的最坏情况，但感谢您的帮助:)