maxlength限制输入字符数，按Unicode码点计数，仅对input和textarea生效；text-overflow仅控制单行显示截断，需width、overflow:hidden、white-space:nowrap配合；多行省略依赖-webkit-line-clamp且不兼容Firefox。
HTML 本身不提供“字数限制后自动隐藏”的一体化方案——maxlength 管输入，text-overflow 管显示，二者互不感知，必须分开配置且用途完全不同。
用 maxlength 限制用户能输多少字符
这是唯一原生、可靠、无需 JS 的输入拦截方式，只对 <input> 和 <textarea> 有效。
-
maxlength按 Unicode 码点计数，中文、英文、数字都算 1 个字符；但 emoji（如 ?）若为代理对（surrogate pair），会被计作 2 个码点，可能比预期少输 1 个 - 浏览器会直接禁用超出部分的输入，无法通过粘贴、拖入或 DevTools 修改绕过视觉限制（但可绕过提交）
- 它不控制显示效果：即使设了
maxlength="10"，如果容器太窄，文本仍可能换行或撑开布局 - 示例：
<textarea maxlength="200"></textarea>
用 text-overflow: ellipsis 隐藏超出容器的单行文本
这和输入限制无关，纯属 CSS 渲染控制，适用于任何块级或 inline-block 元素（如 <div>、<td>、<span>）。
- 必须同时满足四个条件才生效：
width或max-width+overflow: hidden+white-space: nowrap+text-overflow: ellipsis - 表格单元格（
<td>）需先设table-layout: fixed，否则宽度声明无效，文字仍会撑开列宽 - 不支持百分比宽度下的稳定截断（尤其在响应式中），建议用固定像素或
ch单位（如width: 30ch表示约 30 个中文字符宽度） - 示例：
<div style="width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis">超长文本会变成…</div>
多行文本截断并显示省略号（仅 WebKit/Blink 支持）
标准 CSS 尚无跨浏览器的多行省略方案，目前最常用的是基于 WebKit 的私有属性组合。
立即学习“前端免费学习笔记（深入）”；
- 核心三件套：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: N（N 为保留行数） - 必须配合
overflow: hidden，且父容器不能是inline元素（如默认<span>） - Firefox 不支持
-webkit-line-clamp，IE 完全不支持；若需兼容，得降级为 JS 截字符串（如str.substring(0, 80) + '…'）或服务端预处理 - 注意：该方法按“行高 × 行数”裁剪，不是按字符数，中文混排英文时实际显示字数浮动较大
- 示例：
<p style="display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden">这里是多行文本…</p>
为什么不能只靠前端做字数控制？
因为所有前端限制都可被绕过：禁用 JS 后 maxlength 仍生效，但用户可手动删掉属性；text-overflow 更只是视觉遮盖，DOM 里原文完整存在。
- 后端必须校验
Content-Length或实际字符长度（推荐用String.prototype.length在 Node.js / Python 中判断，而非字节长度） - 对
<textarea>，尤其要防用户粘贴超长内容后绕过 JS 截断逻辑（比如监听paste事件并preventDefault()再处理） - 真正关键的边界：数据库字段长度（如 MySQL
VARCHAR(200)）、API 接口文档约定、以及错误提示是否明确告知“最多 200 字符”，而不是只让前端静默截断
最易被忽略的一点：中文标点（如，。！？；：""''（）【】）和全角空格都占 1 字符，但用户常误以为“看起来短就没事”；而富文本编辑器返回的 HTML 字符串（含标签）长度远超肉眼所见，这类场景必须在服务端剥离 HTML 后再计数。
