时间戳

首页 > 解决方案 > 输入html的多个点

css - 输入html的多个点

问题描述

我有一个封装输入 html 标记的 React 组件。输入标签的默认行为是如果字符多于输入可以显示的字符，我们可以使用不可见的滚动向左和向右滚动（例如，我输入 John Smitheens 的大小为 11）。

在此处输入图像描述

我想将显示更改为 John Smith ......如果输入未聚焦（未单击）。

在此处输入图像描述

我不知道我想预先限制的字符大小或数量，因为 React 组件在很多地方使用，并且大小因父组件而异（宽度：100%）。有没有办法获取输入大小或知道字符何时超过输入宽度？谢谢 

<!DOCTYPE html>
<html>
<body>
  <input placeholder="Search User" type="text" size="11">
</body>
</html>

标签： css

解决方案

只需添加text-overflow: ellipsis;到输入

input {
  text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>

<body>
  <input placeholder="Search User" type="text" size="11">
</body>

</html>

推荐阅读