Question

取代横向规则或div边框之类的东西，我想做这样的事情：

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

注意Title和content之间的分隔符是字面意思是斜线，asterix，破折号，然后是星号和斜杠结束（它应该看起来像代码）。

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

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

Answer 1

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我只是用了一些荒谬的破折号来填满大屏幕。您可以更改#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水平分隔线？

2 个答案: