html实现字数超出范围就在输入文本后加“...”

可以使用CSS的text-overflow属性来实现。具体步骤如下：

1. 设置文本容器的宽度和高度，并设置overflow属性为hidden。

<div class="text-container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque mauris, rhoncus eu felis vel, vulputate ornare turpis. Donec vel vehicula eros. Nulla facilisi. Nunc in justo euismod, consectetur leo vitae, porta tellus. Donec euismod, metus eu sagittis aliquet, nisl ex lobortis purus, vel venenatis eros nibh at tellus. Ut et aliquet arcu. Vivamus vel fermentum enim. Sed semper consequat quam, a pharetra mauris vestibulum vel.
</div>

<style>
.text-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
</style>

2. 设置text-overflow属性为ellipsis。

.text-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 同时设置white-space属性为nowrap。

.text-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

这样，当文本超出容器的宽度时，就会自动省略号表示省略的部分。

完整代码如下：

<div class="text-container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque mauris, rhoncus eu felis vel, vulputate ornare turpis. Donec vel vehicula eros. Nulla facilisi. Nunc in justo euismod, consectetur leo vitae, porta tellus. Donec euismod, metus eu sagittis aliquet, nisl ex lobortis purus, vel venenatis eros nibh at tellus. Ut et aliquet arcu. Vivamus vel fermentum enim. Sed semper consequat quam, a pharetra mauris vestibulum vel.
</div>

<style>
.text-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>