Question

我有这个终端，但我似乎无法调整它（它总是页面的宽度），我不能写任何东西。

这里有什么问题？

#terminal2 {
  width: 50px;;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.js"></script>

<div id="terminal2"></div>
<script>
  var term = new Terminal();
  term.open(document.getElementById('#terminal2'));
  term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
</script>

Answer 1

这适合我。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.js"></script>
    <style type="text/css">
        #terminal2 {
      width: 500px;
    }
    </style>
    <script>
        window.onload = function(){
            var term = new Terminal();
            var tt = document.getElementById('terminal2')
            term.open(tt);
            term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
        }
    </script>

</head>
<body>
    <div>
    <div id="terminal2"></div>
    <div>
</body>
</html>

Answer 2

试试这个：

window.onload = function(){
    var term = new Terminal();
    var tt = document.getElementById('terminal2');
    term.open(tt);
    term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
}

#terminal2 {
    width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.css" rel="stylesheet"/>

<div>
  <div id="terminal2"></div>
<div>

调整元素大小

2 个答案: