CSS 文字超出变为省略号

1.单行文本溢出显示符号--必须满足三个条件

width: 100px

先强制一行内显示文本

white-space:nowrap; (默认 normal 自动换行)

超出的部分隐藏

overflow:hidden;

文字用省略号代替超出的部分

text-overflow:ellipsis;

2.多行文本溢出显示省略号
  • width: 100px

  • overflow:hidden;

  • text-overflow:ellipsis;

  • 弹性伸缩盒子模型显示

  • display: -webkit-box;

  • 限制在一个块元素的文本的行数

  • -webkit-line-clamp:2;

  • 设置或检索伸缩盒对象的子元素的排列方式

  • -webkit-box-orient: vertical;

相关推荐
毕业设计制作和分享几秒前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf2 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨2 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL2 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1113 小时前
css实现div被图片撑开
前端·css
薛一半3 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾3 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage3 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发3 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
**之火4 小时前
Web Components 是什么
前端·web components