调整`textarea`的大小以适应其他方向

huangapple go评论61阅读模式
英文:

Resize `textarea` in other directions

问题

我创建了一个textarea并调整其大小,以仅显示文本Title 1: value 1;。然后,我选择了textarea中的所有文本并将该文本拖出来。我注意到在拖动时文本的预览与调整textarea大小后可见的文本部分相同。换句话说,在拖动文本时,Chrome浏览器不显示整个文本,而只显示在textarea中可见的部分。

我想在textarea中仅显示文本value 1;。问题是调整textarea大小的按钮位于该元素的右下角。我想象如果该按钮也位于textarea的左上角,它仍然需要隐藏左侧的文本。

我还没有找到解决这个问题的方法。我也不知道是否有其他HTML元素可以替代textarea以仅显示我需要的文本。

英文:

I created a textarea and resized it to show just the text Title 1: value 1;. Then I selected all the text in the textarea and dragged that text out of it. I noticed that the preview of the text while dragging is identical to the part of the text visible after resizing the textarea. In other words, when dragging the text out, the Chrome browser does not show the whole text, but only the part that is visible in the textarea.

I want to make visible in the textarea only the text value 1;. The problem is that the button that resizes the textarea is located at the bottom right of this element. I imagine that if that button was also on the top left of the textarea it would still need to hide the text to the left.

I haven't found a way to resolve this. I also don't know if another html element can replace the textarea to show only the text I need.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelector(&#39;textarea&#39;).select()

<!-- language: lang-css -->

textarea {
  width: 145px;
  height: 15px;
}

<!-- language: lang-html -->

&lt;textarea&gt;Title 1: value 1; Title 2: value 2;&lt;/textarea&gt;

<!-- end snippet -->

答案1

得分: 2

以下是您要翻译的内容:

"After some thought, this might be a solution for you (your last comment also taken into account). UPDATE: Fore more flexibility a more appropriate solution has been appended at the end.

The key was to use the text-indent property on

UPDATE: A MORE APPROPRIATE SOLUTION

Due to the text-indent dilemma I revised and improved my solution again to get more flexibility. So what changes have been made?

First,

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定