多行显示时，最后一行超出的部分隐藏并显示省略号

最新推荐文章于 2024-01-25 14:06:28 发布
最新推荐文章于 2024-01-25 14:06:28 发布
阅读量366 收藏
点赞数 1
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangjinao/article/details/102868179
版权

多行显示时，最后一行超出的部分隐藏并显示省略号，下面这段代码也可实现单行超出部分省略号，只需将-webkit-line-clamp: 2;中的2改成1就行了

max-height: 44px;

  word-wrap:break-word;

  text-overflow: -o-ellipsis-lastline;

  overflow : hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;  

  -webkit-box-orient: vertical;

皇小邪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里矢量图标
x0572_的博客
07-27 687
矢量图标
可能是最全的 “文本溢出截断省略” 方案合集
u011497228的博客
11-07 341
文章目录引言先来点基础的，单行文本溢出省略核心 CSS 语句优点短板Demo示例图片进阶一下，多行文本溢出省略（按行数）纯 CSS 实现方案核心 CSS 语句优点短板适用场景Demo示例图片基于 JavaScript 的实现方案优点短板适用场景Demo再进阶一步，多行文本溢出省略（按高度）多行文本溢出不显示省略号核心 CSS 语句优点短板适用场景Demo示例图片伪元素 + 定位实现多行省略核心 C...
前端css文本超出隐藏或显示省略号的多种方式
最新发布
丘比特没有箭的博客
01-25 6098
前端css文本超出隐藏或显示省略号的多种方式
CSS3 - 文本超出隐藏显示省略号（单行 / 多行）
王佳斌
07-25 6082
单行 如果实现单行文本的溢出显示省略号（…）应该都知道用 text-overflow:ellipsis 属性来，当然还需要加宽度 width 属来兼容部分浏览。 /* 注意需要给width 注意还需要把容器变为块级元素(因为需要给宽度) */ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果图： 适用范围：因使用了 WebKit 的 CSS 扩展属性，该方法适用于 WebKit 浏览器及移动端。 注意事项： Lis
微信小程序实现多行文字超出部分省略号显示功能
10-16
`的组合使得当内容超出设定的行数时，超出的部分会被隐藏，并在最后一行末尾显示省略号。 然后，在微信小程序的WXML文件中，我们将这个样式应用到文本元素上： ```html <text class='productNameText'>{{item....
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
10-21
下面小编就为大家带来一篇javascript超过容器后显示省略号效果的方法(兼容一行或者多行)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css把超出的部分显示为省略号的方法兼容火狐
09-06
在CSS中，将超出文本部分显示为省略号是一种常见的文本截断技术，它可以帮助保持布局的整洁，尤其是在有限的空间内展示长文本时。要实现这个功能并确保在Firefox浏览器中兼容，我们可以采用以下方法： 首先，我们...
CSS文本超出2行就隐藏并且显示省略号
01-19
超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 超出两行...
文本超出部分显示省略号
热门推荐
JJ_Smilewang的博客
04-06 2万+
我们经常在网站上可以看到以下样式，标题太长，一行显示不下，则会使用省略号来代替。但是事实上，这个省略号并不是打字打上去的，而是使用代码表示出来的。 今天则主要介绍如何让文本超出部分显示省略号。 1.单行文本超出部分显示省略号 1.1 语法 <style> .box { width: 400px; height: 30px; border: 1px solid red; /*第一步： 溢出隐藏 */ o
文本多行最后一行溢出隐藏显示省略号
littlebearGreat——宁静致远
07-13 2280
有时候，需要一段文字，最后一行溢出隐藏显示省略号，这时候css已经不行了（我没找到方法）。 在网上略查了一下，大致思路是这样的： 把一段文字一个一个的放进p标签中，监测换行，达到我们需要的行数以后，把文本截断，最后添加省略号。 然后，就自己写了段简单的js，实现了这个效果。 效果是这样的： 下面是代码 多行省略 div{ width: 200px;
CSS样式控制一行文字超出部分显示省略号 text-overflow:ellipsis
赵静的专栏
09-06 1583
CSS样式控制一行文字超出部分显示省略号 主要使用样式 text-overflow:ellipsis，但只有 text-overflow:ellipsis属性还不够，请看下文。 text-overflow是一个比较特殊的属性，W3C早前的文档中（目前的文档中没有包含text-overflow属性，FML!）对其的定义是:   Name: text-overflow-mode Value:
多行文本最后一行超出时省略为“....”表示
FroSro的博客
07-04 541
.css { display: -webkit-box; -webkit-line-clamp: 3;//设置多行的行数 -webkit-box-orient: vertical; overflow: hidden; }上面写法适用于以webkit为内核的浏览器以及移动端如果是其他需求则需要其他办法下面是单行"..."的表示.css{ text-overfl...
css 一行显示超出部分显示省略号
ITzhongzi的博客
06-03 830
style> p{ width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } style> body> div class="box"> p>hello world！hello world！hel
CSS文本超出显示要求的字符数，就隐藏后面的内容，并且显示省略号
阿啄debugIT
02-16 1132
前言： 首先，要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性，需要记得。 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 解决： css3解决了这个问题，解决方法如下： displa...
html字体超出后隐藏省略号,CSS控制文字超出部分省略号显示
weixin_35152781的博客
06-05 2698
一：单行文本显示不完时，我们只需要设置单行文本的宽度，不允许换行，溢出隐藏及换行省略四个属性即可：p{max-width: 100px;overflow:hidden;text-overflow:ellipsis;/*禁止换行显示*/white-space:nowrap;background-color:#ffe51a;}哈哈哈哈哈哈哈，哈哈哈哈哈，哈哈哈哈哈哈哈二：当我们想要设置多行文本显示不完...
css 单行文本、多行文本超出部分隐藏显示省略号
islql的博客
09-27 219
单行文本 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //显示省略号 white-space: nowrap; //文本不换行 多行文本 overflow: hidden; // 超出的文本隐藏 text-overflow: ellipsis; //显示省略号 display: -webkit-box; //作为弹性伸缩盒子模型显示。 -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直
07_Flask闪现 get_flashed_messages()
coderge's CSDN Blog.
04-24 2798
文章目录1 在模板中获取闪现信息1.1 简单的在模板中实现获取闪现信息1.2 模板中的分类闪现1.3 模板中过滤闪现消息2 在视图中获取闪现信息2.1 简单的在是视图中获取闪现信息2.2 在视图中实现分类获取闪现信息。 插图：恶搞图05 1 在模板中获取闪现信息 Flask 提供了一个非常简单的方法来使用闪现系统向用户反馈信息。闪现系统使得在一个请求结束的时候记录一个信息，然后在且仅仅在下一个请求中访问这个数据，强调flask闪现是基于flask内置的session的，利用浏览器的session缓存闪现信
多行文本溢出显示省略号
qq_43687594的博客
03-15 1万+
文本溢出显示省略号分两种情况，单行文本溢出显示省略号（参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873），另外一种就是多行文本溢出显示省略号。 多行文本显示省略号有两种办法 第一种： 使用定位伪元素遮盖末尾文字 步骤： 给父元素设置: overflow: hidden;/* 溢出隐藏 */ line-height: 20px;/* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
多行文本超出显示省略号效果怎么实现
07-16
要实现多行文本超出显示省略号的效果，可以使用CSS的属性`text-overflow`和`-webkit-line-clamp`。 首先，给文本容器（例如`<div>`或`<p>`元素）设置以下样式： ```css .container { overflow: hidden; text-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值