首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在没有<pre>标签的情况下实现<pre>结果

在没有<pre>标签的情况下实现<pre>结果
EN

Stack Overflow用户
提问于 2021-01-28 07:34:41
回答 3查看 37关注 0票数 0

有没有可能实现这样的结果,其中线条彼此很好地接触:

代码语言:javascript
复制
body {
  margin: 0;
  font-family: 'Courier New', monospace;
}

div pre {
  margin: 0;
}
代码语言:javascript
复制
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>

不需要添加<pre>元素,所以只需要使用css样式。当white-space: pre;被添加到css中时,现在有很大的空间:

代码语言:javascript
复制
body {
  margin: 0;
  font-family: 'Courier New', monospace;
}

div {
  margin: 0;
  white-space: pre;
}
代码语言:javascript
复制
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>



<div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div>

如果这是可能的,那么它将为我节省很多复杂性。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-01-28 07:41:47

删除'Courier New'看起来像是得到了你想要的东西:

代码语言:javascript
复制
body {
  margin: 0;
  font-family: monospace;
}

div {
  margin: 0;
  white-space: pre;
}
代码语言:javascript
复制
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>



<div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div>

<pre>的原始版本中,用户代理的样式表font-family: monospace;优先于您的font-family: 'Courier New', monospace;

票数 1
EN

Stack Overflow用户

发布于 2021-01-28 07:40:03

您可以通过结合使用负letter-spacingmargin-top来实现此效果

代码语言:javascript
复制
body {
  margin: 0;
  font-family: 'Courier New', monospace;
}

div {
  margin: 0;
  white-space: pre;
}

.background_line {
  letter-spacing: -2px;
  margin-top: -4px;
}
.background_line:first-child {
  margin-top: 0;
}
代码语言:javascript
复制
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>



<div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div>

票数 0
EN

Stack Overflow用户

发布于 2021-01-28 07:42:01

您可以重置CSS。

代码语言:javascript
复制
* {
margin: 0;
padding: 0;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65928978

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档