Question

我想将html 输入文本框属性赋予html p 元素。

如果您在文本框中键入任何内容并且文本超出文本框的宽度，它会自动向左滑动，使最左边的字符隐藏，并在末尾添加新字符。这是文本框的默认行为。

我想用HTML p ，

实现同样的目标

我有一种情况， p 用于保存文字。我的意思是无论你键入哪个键，该字符都将显示在 p 中，并且每个字符都会在末尾附加。随着字符数的增加超过 p 的宽度，末尾（最右边）的附加字符变得不可见。也就是说，字符不会像在文本框中那样向左移动。

在 p 中显示滚动不是一个选项（因为在文本框中也不会看到滚动）因此被排除在外。

任何人都可以给我任何意见来实现这一目标吗？我没有使用任何库。

Answer 1

您可以使用contenteditable属性，混合一些CSS属性，例如white-space和overflow：

＆＃13;

p {
  white-space:nowrap;
  max-width: 100%;
  overflow: auto;
  }

＆＃13;

<p contenteditable="true">Edit this &lt;p&gt; element with a long text</p>

＆＃13;

EDITED

由于评论部分，OP需要隐藏滚动条，因此最终代码应为：

＆＃13;

p {
  white-space:nowrap;
  max-width: 100%;
  overflow: hidden;
  }

＆＃13;

<p contenteditable="true">Edit this &lt;p&gt; element with a long text</p>

＆＃13;