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>
相关推荐
喝水的长颈鹿16 小时前
【大白话前端 03】Web 标准与最佳实践
前端
爱泡脚的鸡腿16 小时前
Node.js 拓展
前端·后端
左夕17 小时前
分不清apply,bind,call?看这篇文章就够了
前端·javascript
Zha0Zhun17 小时前
一个使用ViewBinding封装的Dialog
前端
兆子龙17 小时前
从微信小程序 data-id 到 React 列表性能优化:少用闭包,多用 data-*
前端
滕青山17 小时前
文本行过滤/筛选 在线工具核心JS实现
前端·javascript·vue.js
时光不负努力18 小时前
编程常用模式集合
前端·javascript·typescript
恋猫de小郭18 小时前
Apple 的 ANE 被挖掘,AI 硬件公开,宣传的 38 TOPS 居然是"数字游戏"?
前端·人工智能·ios
小岛前端18 小时前
Node.js 宣布重大调整,运行十年的规则要改了!
前端·node.js
OpenTiny社区18 小时前
OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用
前端·javascript·ai编程