CSS显示终端，无滚动条且响应迅速

Question

请，我在终端模拟器上遇到问题。我想显示完整的一行，而没有换行，但显示了文字（当然是text-align: left）。在桌面环境中还可以，但是如果您缩小窗口，则会看到水平滚动条。我用max-width: 100vw解决了这个问题，但是滚动条仍然在文本下方可见。它用于桌面。我认为这已解决。但是，您有一些关于终端模拟器的更好的主意吗？使用什么标准库可以复制代码等？感谢您的指教

我的HTML暂存器

<div class="terminal">
<pre class="terminal">cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>

和CSS的草稿

.terminal {
    // Layout
    padding: 5pt;
    border-radius: .5em;
    display: inline-block;

    // Colors
    background-color: $secondary;
    color: $color5;

    // Text
    font-family: monospace;
    font-weight: $font-weight-bold;
    line-height: $terminal-line-height;
    text-align: center;
}

.terminal pre {
    // Layout
    overflow-x: auto;
    margin: -17px; // This is for compatibility with mobile devices

    // Text
    text-align: left;
}

[不用担心变量，我正在使用Sass进行常规编程。但请问我一些问题：

1. 需要有负边距吗？我读到它是为了与移动浏览器兼容。是的，否则页面是scroll-able，这真的很丑。但是问题是，现有的最现代的终端仿真器解决方案？
2. 最好将<pre>或<textarea>用于终端模拟器？谢谢

我的完整代码是on my codepen

感谢您提供任何建议

PS：我的愿望是暂时避免使用Javascript或Bootstrap。谢谢理解

最佳问候

Answer 1

如果我理解得很好，请检查是否这是您想要发生的行为：

.terminal {
  width: 90%;
  height: 100px;
  padding: 10px;
  background: #000;
  color: #0f0;
  border-radius: 10px;
  font-family: monospace;
  text-align: left;
}

.terminal pre {
  margin: 10px;
  padding: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
}

<div class="terminal">
  <pre>cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>

您拥有的两个项目都属于同一类，这与应用样式的浏览器相冲突。而且，如果您希望滚动条仅水平显示，只需确保也用overflow-y: hidden;隐藏垂直条即可。

这里是一个小提琴，因此您可以调整窗口的大小并查看它的响应速度。希望能有所帮助！

JSFiddle