Html 文本输入在 Chrome 中保持水平滚动，带有文本溢出：省略号

发布于12月19日

我有一个文本输入，我想要保持300px的固定宽度.允许文本输入的值超出该值的范围.当文本超出输入的范围时，我希望用省略号截断文本，但当聚焦时，输入应该是水平可滚动的.

这一行为全部由text-overflow: ellipsis;人提供.问题是，当没有聚焦时，输入仍然可以水平滚动，但由于文本被截断，它只会滚动到空白区域.我如何才能阻止这种情况的发生？

测试以下代码时，我在Chrome(108.0)中遇到了这个问题，但Firefox或Safari没有.这只是Chrome无法避免的一个特征吗？

<form>
  <input
    type="text"
    style="width: 300px; text-overflow: ellipsis"
    value="asdfasdflkajsdlfjalsdfkaslkdfjalskdjflkasjdflkjaldsfkjalsdfjasdfasfasdf"
  />
</form>

这是当你向右滚动时看起来的样子:Image of unwanted behaviour.

我try 在输入中添加overflow: hidden;和white-space: nowrap;，以及周围表单上的这些属性、表单上方的div，甚至表单内输入周围的div.所有这些都会导致相同的行为或上述规范之外的其他行为.

有这个相关的问题，但没有令人满意的答案，我已经能够缩小到一个Chrome问题……Input element scrollable with text-overflow ellipsis enabled个

//Locate all elements with class inputContainer document.querySelectorAll('.inputContainer').forEach(container => { //Bind a click event to each of those elements (parent) container.addEventListener("click", function() { //Turn on pointer-events (defaulted to off in CSS) //and focus to prevent need to double click for focus container.querySelector('input').style.pointerEvents = "auto"; container.querySelector('input').focus(); }); }); //Bind a blur event to all input fields to turn pointer-events back to "none" document.querySelectorAll('input').forEach(input => { input.addEventListener("blur", function() { this.style.pointerEvents = "none"; }); });

<form>  <div class="inputContainer"> <input type="text" style="pointer-events:none;width: 300px; text-overflow: ellipsis" value="asdfasdflkajsdlfjalsdfkaslkdfjalskdjflkasjdflkjaldsfkjalsdfjasdfasfasdf" /> </div> </form>

Html 文本输入在 Chrome 中保持水平滚动，带有文本溢出：省略号

推荐答案

Html相关问答推荐

如何通过扭曲元素来倾斜元素？

有没有一种方法可以动态地从网格或Flexbox中取出HTML元素？

根据按钮位置左/右对齐按钮

使具有FLEX父项的溢出自动的子元素收缩

如何使用 HTML 将对象数组发送到 Nodejs Express

如何在 VS Code 中 Select 和删除 HTML 元素(其标签和内容)？

使用 Thymeleaf 将图像水平居中

如何用js和CSS在两点之间画一条线

如何检测输入字段是否没有必填且没有占位符？

使用修饰键微调 HTML 输入范围中的值

SVG 填充 colored颜色不使用轮廓填充空白区域

如何使用 CSS 应用带有笔划的文本阴影？

使用 calc 函数设置字体大小时 Flexbox 项目重叠

如何使用 html 和 css 为卡片创建此背景框架

使用 CSS 样式化进度条

如何在单击按钮时切换 Blazor 中的类？

浮动元素忽略 margin-top 属性后的块元素

使元素扩展宽度减go margin-right

以 HTML 格式显示的 LaTeX 表格

如何创建宏？