CSS 控制单行文本和多行文本的显示区域不够存放时使用省略号...来替代的做法

关注

原创最新推荐文章于 2026-08-05 11:03:14 发布 765 阅读 AI 写同款· GEO 优化 ›

Claude Opus 4.5工作流实战：零代码构建可交付AI生产力系统 AI工作流本质上是将重复性脑力劳动转化为结构化、可复用的数字资产。其核心在于模型对长上下文的理解能力、指令遵循精度与外部连接稳定性三者的协同——这直接决定自动化产出是否具备工业级可用性。Claude Opus 4.5凭借原生支持Projects封装、Web Search实时检索、多连接器双向数据管道等特性，在中文语境下的SEO关键词控制、跨文件逻辑保持、HTML/CSS/JS端到端生成等关键任务中表现突出。它不依赖API开发或JSON Schema配置，而是通过Instructions+Memory+Fil 阅读详情

1、单行文本控制超出存放区域时使用 "..." 代替的 css 控制如下：

       .singleLine{
	        width:120px;
		background:#0ff;
                overflow:hidden;/*多余文字隐藏*/
		white-space:nowrap;/*不换行*/
		text-overflow:ellipsis;/*多余文字使用"..."代替*/
	 }

2、多行文本控制超出存放区域时使用 "..." 代替的 css 控制如下：

	 .multiLine{
	    width:120px;
		background:#0ff;
		overflow:hidden;/*多余文字隐藏*/
		text-overflow:ellipsis;/*多余文字使用"..."代替*/
		display:-webkit-box;/*盒子模型*/
		-webkit-line-clamp:3;/*设置在第三行显示"..." */
		-webkit-box-orient:vertical;/*竖直排列*/
	 }

测试代码及效果图如下所示：

<html>
  <style type="text/css">
     .singleLine{
	        width:120px;
		background:#0ff;
                overflow:hidden;/*多余文字隐藏*/
		white-space:nowrap;/*不换行*/
		text-overflow:ellipsis;/*多余文字使用"..."代替*/
	 }
	 .multiLine{
	        width:120px; /** 可以不指定高度 */
		background:#0ff;
		overflow:hidden;/*多余文字隐藏*/
		text-overflow:ellipsis;/*多余文字使用"..."代替*/
		display:-webkit-box;/*盒子模型*/
		-webkit-line-clamp:3;/*设置在第三行显示"..." ，必须指定，不然没“...”效果*/
		-webkit-box-orient:vertical;/*竖直排列*/
	 }
  </style>
  <body>
     <div class="singleLine">
	    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
	 </div>
	 <hr/>
	 <div class="multiLine">
	    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
	 </div>
  </body>
</html>