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

【问题标题】：How to make a dynamic ascii horizontal divider?如何制作动态ascii水平分隔符？
【发布时间】：2015-01-27 00:37:42
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript css divider

【解决方案1】：

真是个好问题，在制作这个纯 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;
}

&lt;hr&gt;

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

【讨论】：

刚刚意识到您要求的解决方案可以扩展到全宽，因此我删除了我在上面的演示中设置的任意固定宽度。
谢谢！这太棒了。我不得不做一些调整，因为如果你设置为 100% 宽度，那么 hr::after 内容就会被推到 div 之外。因此，将宽度设置为 90% 有助于防止“*/”超出 div 的右边缘。此外，在我的 hr::after 中，我在 content 参数中包含了一个“\a”，并添加了空格：pre。这显然会在 HR 之后强制换行。由于我的修复在技术上不是“100%”宽度，所以我需要一种方法来确保在
之后线路正确中断。谢谢！
嘿，对于::after 推到 div 之外的问题，在我编辑我的答案以添加 box-sizing: border-box 之前，你有没有机会复制这个？我在今天下午早些时候添加 width: 100% 并在上方修复时看到了这个问题。
::after 突出的原因是默认情况下 padding 属性会附加到元素的宽度上。所以如果你做了一些width: 100% 然后给它任何左/右填充，元素的新宽度将是 100%+任何填充。 这被 CSS 规范编写者广泛认为是相当愚蠢的。 box-sizing 是一个 CSS 属性，允许您更改影响 CSS 元素大小的规则。更多信息在这里：css-tricks.com/box-sizing
是的，让填充扩展对象的边界并没有多大意义。谢谢扎克克斯。欣赏额外的信息！

【解决方案2】：

这可以在不使用带有white-space CSS 属性的 JavaScript 的情况下实现：

#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 元素。

【讨论】：

这两个答案都很酷。我选择另一个是因为我将在许多不同的地方使用这个 HR，我不想在每个地方都包含那个“长虚线”。这种方法的最大优点是，如果您无法使用 css 线性渐变工具重新创建破折号，那么这将完美匹配破折号。