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>
相关推荐
啊~哈17 分钟前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
小小小小宇42 分钟前
前端小tips
前端
小小小小宇1 小时前
二维数组按顺时针螺旋顺序
前端
安木夕1 小时前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net
努力敲代码呀~1 小时前
前端高频面试题2:浏览器/计算机网络
前端·计算机网络·html
高山我梦口香糖2 小时前
[electron]预脚本不显示内联script
前端·javascript·electron
神探小白牙2 小时前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频
Angel_girl3192 小时前
vue项目使用svg图标
前端·vue.js
難釋懷2 小时前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo2 小时前
Ajax入门
前端·ajax·okhttp