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>
相关推荐
全宝7 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔11 分钟前
STM32低功耗模式全面指南
css·stm32·css3
yanlele31 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮37 分钟前
【无标题】
开发语言·前端·javascript
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军3 小时前
React 协调器 render 阶段
前端·react.js·前端框架