首页 > 其他分享 >CSS实现单行、多行文本溢出显示省略号

CSS实现单行、多行文本溢出显示省略号

时间:2023-05-05 18:33:46浏览次数:41  
标签:多行 省略号 单行 CSS https overflow 溢出

代码

单行文字溢出打点

    div {
      width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

多行文字溢出打点

    div {
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3; //行数
          -webkit-box-orient: vertical;
    }

ps: https://github.com/josephschmitt/Clamp.js 这个是封装好的多行溢出打点库, 原理就是就是上面的代码示例.

 

[css多行文字溢出打点_刘翾的博客-CSDN博客](https://blog.csdn.net/c_kite/article/details/81486953)

[CSS实现单行、多行文本溢出显示省略号 - 掘金](https://juejin.cn/post/6915752928691126279)

[CSS单行、多行文本溢出显示省略号 - 个人文章 - SegmentFault 思否](https://segmentfault.com/a/1190000009262433)

 

标签:多行,省略号,单行,CSS,https,overflow,溢出
From: https://www.cnblogs.com/ministep/p/17375054.html

相关文章

  • css中filter的部分特别用法
    1. drop-shadow函数如果给png的图片设置阴影通过box-shadow就会变成这样但可以通过fliter来重新实现 会变成这样.header{//box-shadow:10px10px10px#000;filter:drop-shadow(10px10px10pxrgba(0,0,0,.5));}  2.hue-roate函数.header{filter:......
  • 页面引入css样式时,使用link和@import有什么区别
    css文件引入的方式有两种:1.HTML中使用link标签<linkrel="stylesheet"href="style.css/>2.css中使用@import@import"style.css"/*使用字符创*/@importurl("style.css")/*使用url地址*/link和@import区别link属于HTML标签,除了加载css外,还可以做很多其的他事,比......
  • DevTools failed to load source map: Could not load content for https://xxxxx/boo
    DevToolsfailedtoloadsourcemap:Couldnotloadcontentforhttps://xxxxx/bootstrap-theme.css.map:HTTPerror:statuscode404,net::ERR_HTTP_RESPONSE_CODE_FAILURE这个错误意味着浏览器无法加载指定的CSSsourcemap文件。CSSsourcemap文件通常用于调试前端......
  • 完美的背景图全屏css代码 – background-size:cover?
    写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法需要的效果图片以背景的形式铺满整个屏幕,不留空白区域保持图像的纵横比(图片不变形)图片居中不出现滚动条多浏览器支持以图片bg.jpg为例方法一、最简单,最高效的方法 CSS3.0归功于css3.0新增的一......
  • 关于vue2中使用unocss样式无法生效的问题
    前言在维护公司一个技术栈为vue2+ts+unocss的老项目时发现unocss在开发环境和正式环境都不能生效,最先以为是插件的版本问题,排查后发现是因为项目在使用unocss时的配置没有配置完全,根据vue-cli的版本按照unocss的官方仓库里的example配置vue.config.js这是v......
  • CSS mask的用法
    CSS的mask属性可以让你在元素上添加一个遮罩蒙层,从而有助于创建各种有趣的效果。下面是一些mask属性的常见用法:1.使用图片遮罩img{-webkit-mask-image:url(mask.png);mask-image:url(mask.png);}以上代码将会使用mask.png作为遮罩。这将会使图片只在遮罩区域内可见......
  • FreeCodeCamp-通过编写咖啡店菜单学习CSS
    index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>CafeMenu......
  • vue学习 第十一天 CSS3新特性 ---- 新增选择器(1、属性选择器 2、结构伪类选择
    CSS3新特性1、CSS3现状1)新增的CSS3特性有兼容性问题,ie9+才支持2)移动端支持优于PC端3.)不断改进中,应用相对广泛 2、CSS3新增选择器CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。1)属性选......
  • vue学习 第十天(1) css高级技巧 ----CSS用户界面样式 / vertical-align属性应用
    用户界面样式 1)鼠标样式cursorli{cursor:pointer;}设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 2、轮廓线outline给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边......
  • vue学习 第九天(2) css高级技巧. ---- 精灵图 / 字体图片 / CSS三角
    学习目标:1)精灵图2)字体图标3)CSS三角4)CSS用户界面样式5)vertical-align属性应用6)溢出的文字省略号显示7)常见的布局技巧 1、精灵图1)需要精灵图的原因  (减少网页多张小图片的多次服务器请求)网页中有很多小的背景图,过多的图片。......