input输入框超出部分用省略号表示以及判断内容是否有超出（PC端）

注意：下面代码是在PC的Web端跑的喔，移动端等其他环境我还没试过…

input输入框超出部分用省略号表示

这部分用css样式设置overflow: hidden和text-overflow: ellipsis实现就可以，找到其他答案是要设置width和white-space: nowrap，尝试了一下，这两个不设置也是可以实现。如果不行那就都加上试试。

下面的代码可以复制到菜鸟教程在线编辑器上运行看看。

DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
<style>
	.wrap {
		width: 300px;
		padding: 10px;
		border: 1px solid #ccc;
	}
	.inputClass {
		/* width:150px; */ 
		/* white-space: nowrap; */
		text-overflow: ellipsis;
		overflow: hidden;
	}
style>
head>
<body>

<div class="wrap">
	<input class="inputClass" type="text" name="FirstName" value="MickeyMickeyMickeyMickeyMickey">
	<p>提示信息p>
div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

效果：
在这里插入图片描述

input输入框判断文本内容是否有超出

根据内容是否有超出，可以判断是否需要展示气泡提示框（比如Element的Tooltip组件）来提示文本
当然，鼠标点击进去就可以左右移动看到全部内容，但是需求嘛…你懂的

主要代码（ const isEllipsis = input.offsetWidth < input.scrollWidth ）：

DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
<style>
	.wrap {
		width: 300px;
		padding: 10px;
		border: 1px solid #ccc;
	}
	.inputClass {
		/* width:150px; */
		/* white-space: nowrap; */
		text-overflow: ellipsis;
		overflow: hidden;
	}
style>
<script type="text/javascript">
	function determineTheOverflow(input){
		var isEllipsis = input.offsetWidth < input.scrollWidth;
		input.title = isEllipsis? input.value : '';
	}
script>
head>
<body>

<div class="wrap">
	<input class="inputClass" type="text" name="FirstName" value="MickeyMickeyMickeyMickeyMickey" onblur="determineTheOverflow(this)">
	<p>提示信息p>
div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

效果：
在这里插入图片描述

input输入框超出省略部分鼠标按下会移位的问题

当在外层wrap边框元素的里面， “提示信息” 文本的右边，按下鼠标左键不放，然后往左上输入框的位置移动，接着往右移动，然后放掉鼠标左键，会出现 input 内容跟随的移动的问题。内容还是有省略且不会复原。如下图：

在这里插入图片描述

解决方法1：
不要留有空位；因为鼠标按下左键时的位置，是 p元素的内容区，是一个可选中文本的范围。把 p元素改用span，或者让内容区的宽度与文本内容的宽度刚好包裹，应该就不会有这种问题出现。

解决方法2：
监听mousedown事件，阻止默认行为，但是会导致被阻止的这个元素里面的文本内容无法选中。如果是一个icon图标，不需要有选中效果的话，可以使用这种方式。

DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
<style>
	.wrap {
		width: 300px;
		padding: 10px;
		border: 1px solid #ccc;
	}
	.inputClass {
		/* width:150px; */
		/* white-space: nowrap; */
		text-overflow: ellipsis;
		overflow: hidden;
	}
style>
<script type="text/javascript">
	function determineTheOverflow(input){
		var isEllipsis = input.offsetWidth < input.scrollWidth;
		input.title = isEllipsis? input.value : '';
	}
  function preventDefault(event) {
    event.preventDefault();
  }
script>
head>
<body>

<div class="wrap">
	<input class="inputClass" type="text" name="FirstName" value="MickeyMickeyMickeyMickeyMickey" onblur="determineTheOverflow(this)">
	<span onmousedown="preventDefault(event)">提示信息span>
div>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

相关阅读:
PFSK165 3BSE027778R1 VP74201-933CW07 允许用户对数据进行读写操作
 干外包3年，彻底寄了...
Dest0g3 520迎新赛web
数据分析之数据预处理、分许建模、可视化
 【Docker】Docker最近这么火，它到底是什么
 LeetCode——1678.设计 Goal 解析器
 linux常用命令(2)：tar命令(压缩文件/解压缩文件)
dreamweaver动漫HTML网站制作——海贼王主题网页1页海贼王我当定了(HTML+CSS)
图片上传怎么搞？！阿里云OSS对象存储教你快速实现！
The Sandbox 中的建设者：走进 Sandja Studio
原文地址：https://blog.csdn.net/weixin_44679078/article/details/126067530