javascript - 长内容可编辑的 div 被鼠标水平滚动屏蔽为输入

Question

如果输入太短而无法看到整个文本，用户可以使用鼠标拖动在输入内水平滚动文本。有什么方法可以在屏蔽为输入的 contenteditable 字段中实现此行为？

<div contenteditable="true">...some long text...</div>

Answer 1

希望我能正确理解您的回答，但这似乎是您申请 overflow:hidden 时的默认行为到 contenteditable 元素。与 white-space:nowrap (和一些 css 摆弄)你可以创建自己的 <input>元素(我从 MacOS Safari 中重新创建了这些元素):

[contenteditable] {
  display: inline-block;
  box-sizing: border-box;
  max-width: 146px;
  border: 1px solid #ccc;
  padding: 3px;
  margin: 0 2px;
  font-size: 11px;
  font-family: system-ui, sans-serif;
  overflow: hidden; /* here it is */
  white-space: nowrap;
}

label {
  display: block;
  text-align: right;
}

<label>Input: <input value="Lorem ipsum dolor amet slow-carb drinking vinegar actually green juice hell of literally locavore sriracha keytar health goth cold-pressed seitan bushwick quinoa. 8-bit iceland microdosing, prism hell of lyft cold-pressed cloud bread retro live-edge hammock. Tilde fanny pack street art green juice tote bag everyday carry. Kickstarter retro +1, mumblecore echo park next level heirloom adaptogen air plant locavore helvetica. Copper mug craft beer neutra, sriracha chartreuse shoreditch man bun ugh vice ethical authentic."></label>
<label>Contenteditable: <div contenteditable>Lorem ipsum dolor amet slow-carb drinking vinegar actually green juice hell of literally locavore sriracha keytar health goth cold-pressed seitan bushwick quinoa. 8-bit iceland microdosing, prism hell of lyft cold-pressed cloud bread retro live-edge hammock. Tilde fanny pack street art green juice tote bag everyday carry. Kickstarter retro +1, mumblecore echo park next level heirloom adaptogen air plant locavore helvetica. Copper mug craft beer neutra, sriracha chartreuse shoreditch man bun ugh vice ethical authentic.</div></label>