Question

我希望用户通过拖动底部边框来调整AngularJS页面中的pre元素。我想要实现的效果与我现在使用的textarea堆栈溢出的方式非常相似，但只能更有效地读取pre中写的文本。

这是AngularJS代码的简单部分

<div class="container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-md-6">
                First variable
                <pre>{{first}}</pre>
            </div>
            <div class="col-md-6">
                Second variable
                <pre>{{second}}</pre>
            </div>
        </div>
    </div>
</div>

与pre关联的css位是以下

pre {
  tab-size: 2;
  text-align : left;
  height: auto;
  max-height: 240px;
  overflow: auto;
  word-break: normal !important;
  word-wrap: normal !important;
  white-space: pre !important;
};

我希望能够调整前两者的高度以显示更多内容。

我看了一下这个例子，认为我可以调整包含pre的divs的大小。不幸的是，我无法使其发挥作用，但我甚至不确定这是正确的方法。

Answer 1

提供pre这些规则：

pre {
  resize: both;
  overflow: auto;
}

<强>段

pre {
  resize: both;
  overflow: auto;
  height: 70px;
  width: 150px;
}

<pre>#include "me.h";
#include "conio.h";</pre>

通过拖动调整前一元素的大小

1 个答案: