html - CSS显示终端没有滚动条和响应

问题描述

拜托，我有终端模拟器的问题。我想显示一行全长，当然不换行，但文本（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进行正常编程。但我有一些问题请：

需要负边距吗？我读到它是为了移动浏览器的兼容性。是的，否则页面是可滚动的，这真的很难看。但问题是，现有的最现代的终端仿真器解决方案？
更好用<pre>还是<textarea>终端模拟器？谢谢

完整的我的代码在我的代码笔上

感谢您的任何建议

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

此致

标签： htmlcssterminaltextareapre

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

.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

html - CSS显示终端没有滚动条和响应

问题描述

解决方案

推荐阅读