CSS Дисплей терминала без полос прокрутки и отзывчивый - PullRequest
Новая
       60

CSS Дисплей терминала без полос прокрутки и отзывчивый

0 голосов
/ 23 апреля 2020

пожалуйста, у меня проблема с симулятором терминала. Я хочу показать одну строку во всю длину, без переноса, конечно, кроме текста (text-align: left, конечно). Это нормально на рабочем столе, но если вы уменьшите окно, вы увидите горизонтальную полосу прокрутки. Я решаю это с помощью max-width: 100vw, но затем под текстом все еще видна полоса прокрутки. Это для рабочего стола. Я думаю, что это решено. Но есть ли у вас лучшие идеи для эмулятора терминала? Какая библиотека используется стандартно, которая может копировать ваш код, и т. Д. c ...? Спасибо за совет Что касается переменных, я использую Sass для нормального программирования. Но у меня есть несколько вопросов, пожалуйста:

  1. Нужно иметь отрицательную маржу? Я читал, что это для совместимости с мобильными браузерами. И да, в противном случае страница с возможностью прокрутки , что действительно ужасно. Но вопрос в том, существуют ли самые современные решения для эмулятора терминала?
  2. Лучше использовать <pre> или <textarea> для симулятора терминала? Спасибо

Полный мой код на моем коде

Спасибо за любой совет

PS: Мое желание избежать Javascript или Bootstrap на данный момент . Спасибо за понимание

С наилучшими пожеланиями

1 Ответ

0 голосов
/ 23 апреля 2020

Если я правильно понял, проверьте, действительно ли вы ожидаете такого поведения: 

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

  cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init

У вас были оба элемента одного класса, что противоречило тому, что браузер применял стилизацию. И если вы хотите, чтобы полоса прокрутки отображалась только по горизонтали, просто не забудьте также скрыть вертикальную полосу с помощью overflow-y: hidden;.

Вот скрипка, чтобы вы могли изменить размер окна и увидеть, как оно работает быстро. Надеюсь, это помогло!

JSFiddle

...