最新消息:20210917 已从crifan.com换到crifan.org

【已解决】html中如何画个文本框显示多行的大段的文字

HTML crifan 551浏览 0评论
折腾:
【已解决】electron中实现html的文本区域界面用于显示js中获取到的字符串
期间,需要去html中实现一个区域,用于显示来自mitmdump抓取出的url,且是连续输出的多行的大段的文字。
且希望输入框可以拖动变化。
且支持超出高度后可以滚动显示。
记得有个textarea,去看看是否合适。
html textarea
HTML <textarea> 标签
<textarea> 标签定义多行的文本输入控件。
HTML <textarea> 标签 | 菜鸟教程
<textarea> – HTML(超文本标记语言) | MDN
html 文本框 可变大小
html 文本框 类似 textarea
input和textarea的区别 – 简书
再去想办法html中顶部加上css定义:
html css 顶部
html css 嵌入
CSS嵌入HTML的三种方法 – 简书
HTML嵌入CSS样式(四种方法)
http://c.biancheng.net/view/1293.html
单行文本框input与多行文本框textarea有什么区别-网站程序网
input和textarea的区别 – 简书
代码:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mitmdump保存URL</title>

  <style>
  #output {
      border: 1px solid #ccc;
      padding: 10px;
      /* width: 400px; */
      /* min-width: 800px; */
      width: 400px;
      /* min-height: 200px; */
      height: auto;
      /* 可以设置一个最大高度,超出时滚动,否则,高度会被撑开 */
      /* max-height: 300px; */
      overflow: auto;
  }

</style>
  </head>
  <body>
    <div>
      <!-- <textarea readonly id="output"  rows="100" cols="50"></textarea> -->
      <textarea readonly id="output"></textarea>
    </div>
  </body>

</html>
效果:
 
【总结】
最后用textarea去显示一个文本区域
代码:
electron-python-example/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mitmdump代理保存URL</title>

    <style>

      h1 {
        text-align: center;
      }

      #mitm {
        text-align: center;
      }
...
      #output {
          margin-top: 20px;

          background-color: powderblue;

          border: 1px solid #ccc;
          padding: 10px;
          /* width: 400px; */
          /* min-width: 800px; */
          width: 500px;
          min-height: 300px;
          /* height: auto; */
          /* 可以设置一个最大高度,超出时滚动,否则,高度会被撑开 */
          /* max-height: 300px; */
          overflow: auto;
      }
    </style>

  </head>

  <body>
    <div id="mitm">
        ...
      <div>
        <!-- <textarea readonly id="output"  rows="100" cols="50"></textarea> -->
        <textarea readonly id="output"></textarea>
      </div>
    </div>

  </body>
效果:

转载请注明:在路上 » 【已解决】html中如何画个文本框显示多行的大段的文字

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
99 queries in 0.189 seconds, using 23.36MB memory