css 文字单行多行超出长度后显示 ...

0.超出...

1、单行文本超出

javascript 复制代码
<div class="content">测试数据:css单行文本超出显示省略号--------</div>
 
<style>
.content{
  width: 200px;
  height: 200px;
 
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
</style>

2、多行文本超出

javascript 复制代码
<div class="content">测试数据:css多行文本超出长度显示省略号,如2行文本超出长度显示省略号----------------------</div>
 
<style>
.content{
  width: 200px;
  height: 200px;
 
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
相关推荐
小张快跑。3 分钟前
【Java企业级开发】(十一)企业级Web应用程序Servlet框架的使用(上)
java·前端·servlet
小白阿龙12 分钟前
Flex布局子元素无法垂直居中
前端
秋田君22 分钟前
前端工程化部署入门:Windows + Nginx 实现多项目独立托管与跨域解决方案
前端·windows·nginx
江城开朗的豌豆1 小时前
阿里邮件下载器使用说明
前端
半兽先生1 小时前
Web 项目地图选型指南:从 Leaflet 到 MapTalks,如何选择合适的地图引擎?
前端
hssfscv1 小时前
Javaweb 学习笔记——html+css
前端·笔记·学习
Mr.Jessy1 小时前
JavaScript高级:深浅拷贝、异常处理、防抖及节流
开发语言·前端·javascript·学习
唐叔在学习1 小时前
30s让ai编写「跳过外链中转页」的油猴脚本
前端·javascript
酸菜土狗2 小时前
🔥 纯 JS 实现 SQL 字段智能解析工具类,前端也能玩转 SQL 解析
前端