如何制作动态 ascii 水平分隔符？

Question

代替水平线或 div 边框，我想做这样的事情：

我的标题
/*--------------------*/
我的内容

请注意标题和内容之间的 divider 实际上是斜杠、星号、破折号，然后是星号和斜杠结束（它应该看起来像代码）。

我很好奇我如何在流动布局上实现这种效果，divider 拉伸以填充 div 的整个宽度。另外，我不想为此使用任何艺术。只使用 ascii 就完美了。

总结：如何创建动态调整大小的自定义 ascii divider？我认为这可能必须主要在 Javascript 中完成，然后在每次 window 调整大小时轮询 div 的宽度，然后计算字符的长度（这是一个monospace 字体）需要填充 space。这是在正确的轨道上吗？

Answer 1

无需使用 JavaScript 和 white-space CSS 属性:

#container {
  width: 300px;
  position: relative;
  border: 1px dotted black;
}
#dashes {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}
#opencomment, #dashes, #closecomment {
  position: absolute;
}
#opencomment, #closecomment {
  background-color: #FFFFFF;
  z-index: 10;
}
#closecomment {
  right: 0px;
}

<div id='container'>
    <h1>Title</h1>
    
    <div id='opencomment'>/*</div>
    <div id='dashes'>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
    <div id='closecomment'>*/</div>

    <!-- position:absolute elements don't affect the DOM, so we need to
        "clear a line" -->
    <div>&nbsp;</div>

    <p>Content</p>
</div>

我只是使用了荒谬的破折号来填满宽屏幕。您可以更改 #container 的宽度以使其更宽或更窄，或者您可以完全删除 #container 元素。

Answer 2

多么好的问题，在制作这个 CSS 唯一的解决方案时玩得很开心。

（由于字距调整的差异，需要针对每个新字体系列进行调整，但它应该在同一系列的不同字体大小下表现得相当好。）

hr {
  /* reset */
  display: inline-block;
  border: none;
  
  /* sizing */
  box-sizing: border-box;
  width: 100%;
  height: 0.1em;
  
  /* dashes */
  background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 80%, transparent 80%); /* space */
  background-size: 0.4em 0.4em; /* dash */
  
  /* spacing between start/end */
  padding: 0 0.7em;
  background-clip: content-box;

  /* anchor ::before/::after */
  position: relative;
}


/* start/end */
hr::before,
hr::after {
  position: absolute;
  top: -0.5em;
}
hr::before {
  content: '/*';
  left: -0.1em;
}
hr::after {
  content: '*/';
  right: -0.1em;
}

<hr>

可编辑演示：http://jsbin.com/tefuli/2

如何制作动态 ascii 水平分隔符？

How to make a dynamic ascii horizontal divider?

javascript

css

divider