单行文字省略预览

标题太长时,比较省略号与直接裁切;完整原文始终保留。

1. 输入与设置

2. 原生预览与代码

项目交接记录:请在发布前核对移动端标题、版本编号与负责人

完整原文:项目交接记录:请在发布前核对移动端标题、版本编号与负责人

.title {
  width: 240px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
下载CSS

边界与隐私

仅单行横排文字,输入换行按nowrap折叠;不截断原文,不提供多行行数限制。字体、缩放和容器实际宽度决定截断位置;移动端宽度受可用空间约束。省略号只在内容超宽时出现。Flex子项可能还需min-width:0。不要仅用鼠标悬停提供重要全文。本页同时展示完整原文,生成的CSS需结合产品可访问性设计使用。输入仅在当前页内存处理,不上传、不自动保存,无API或密钥。

教程:长标题在240px容器中如何省略