多行文本溢出用省略号表示

最新推荐文章于 2024-07-24 10:23:02 发布
最新推荐文章于 2024-07-24 10:23:02 发布
阅读量2k 收藏 1
点赞数
分类专栏： css 文章标签： css webkit 移动 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SirM2z/article/details/51254900
版权
这篇博客总结了在移动端项目中遇到的多行文本溢出后使用省略号表示的需求。主要讨论了WebKit浏览器的CSS扩展属性，如`-webkit-line-clamp`和`-webkit-box-orient`，以及如何实现跨浏览器兼容的解决方案，包括设置相对定位的容器高度和利用伪元素`::after`来模拟省略号。同时提到了对IE浏览器的兼容性处理。
摘要由CSDN通过智能技术生成
最近在做移动端的项目，遇到了多行文本溢出后用省略号表示的需求，之前一直是每次用到的时候就搜索，这次打算总结一下。

WebKit浏览器或移动端的页面

因为这次做的项目是要放在微信里的，所以一开始想到的便是WebKit的CSS扩展属性(WebKit是私有属性)
  -webkit-line-clamp

注：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

常见结合属性：

  • display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow: ellipsis;可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-sca
最低0.47元/天 解锁文章
SirM2z
关注
专栏目录
关于单行和多行文字溢出用省略号表示
时清云的博客
03-14 473
实现单行或多行文本溢出后隐藏并显示省略号 最近写项目遇到一个关于文本溢出隐藏并显示省略号的问题 通过查询文档以及阅读了一些博文之后获益不少，特此记录： 1.单行文本溢出隐藏： 当文本长度超出一行的宽度时，会自动隐藏溢出文字并且最后显示’…’提示用户。 实现方法： 纯css样式： 复制代码 p{ text-overflow: ellipsis;//必须 white-space: ...
20.溢出文本用省略号表示
potato123232的博客
03-11 475
我们现在有一个盒子，盒子里装很多的文字 1单行文本溢出用省略号表示 我们要搞三步 强制一行显示文本 white-space:nowrap; 如果设置为normal会自动换行，normal是默认值 超出部分隐藏 overflow:hidden; 用省略号代替超出部分 text-overflow:ellipsis; ellipsisi是省略号的意思，如果想用别的符号可以查一下text-overflow跟的值 我们现在把上面三行写上去 效果是这样的 2多行文本溢出...
CSS 实现文本省略显示【单行，2行，多行】
最新发布
gz_qiulinyong的博客
07-24 4337
限制文本显示长度并以省略号表示超出部分是常见的需求。通过CSS，可以简单地实现这一效果。我们将分别介绍单行文本、省略两行文本和多行文本的实现方法。通过使用CSS中的和属性，可以轻松实现单行、多行文本的省略显示。无论是简单的单行文本省略还是复杂的多行文本省略，这些方法都能满足各种需求。
多行文本显示省略号方法：
Sol的博客
09-04 394
多行文本显示省略号方法： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //文本行数 overflow: hidden;文字不换行，超出部分用省略号代替：顺序不能颠倒，三者必须同时存在 overflow:hidden; text-overflow:ellipsis; white-sp
溢出盒子显示省略号
qq_40774743的博客
01-19 424
标题 *{ margin: 0; padding-top:0; } .fff{   width:200px;   height:200px;   background-color: red; } .son{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; o
如何让多行文本出现省略号？
ACV程序猿的博客
08-09 2867
在很多时候，我们写页面时，当我们的文本过多时，太多文字会影响页面的美观，这时我们就要学会压缩文本，省略掉多余的文本，下面我要讲的是，如何让多余文本省略。 首先要认识以下的属性： 1.text-overflow:ellipsis;这是溢出文本显示省略号的必要属性。 2、容器宽度：width：value；（px、%，都可以）（必须要有宽度）； 3、主要是控制父容器里面子元素的排列方式 ：display: -webkit-box; 4、实现...
移动端的text-overflow多行文本溢出显示省略号(…)
12-10
本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。 首先，对于基于WebKit的浏览器（如Safari和Chrome，以及大部分移动端浏览器），我们可以利用WebKit的私有属性`-webkit-line-clamp`。这是一个不受...
多行文本溢出显示省略号
06-15
多行文本溢出显示省略号
CSS实现单行、多行文本溢出显示省略号的实现方法
09-22
需要注意的是，当使用多行文本溢出显示省略号的技术时，要考虑到不同浏览器的支持情况，适当使用兼容性代码或后备方案。在实际开发中，设计师和前端开发者需要仔细权衡可用性和视觉效果，选择最适合项目需求的实现...
CSS实现单行、多行文本溢出显示省略号（…）
07-26
CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看
css实现强制不换行、自动换行、强制换行、超出2行省略号以及word-wrap: break-word和word-break: break-all的区别
qq_37899792的博客
04-17 4826
1. 强制不换行，并且多行文字溢出显示省略号 .ellips{/*超出省略号*/ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ellips_line2,.ellips_line3{/*chrome下的私有属性*/ display:-webkit-box; -webkit-box-orie...
多行文本省略号
qq_43489988的博客
08-15 477
溢出文本显示省略号 写前端页面的时候很多情况下需要省略号，单行文本溢出省略号每次使用都需要百度一下来确认代码的正确性。在这里写一下以后继续百度。。 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 记得加宽度哦。 多行省略号在看过了这篇文章之后，有了两种实用的方法。 css样式 display: -webkit-b...
css-空格，多行末尾省略号显示，鼠标移动上文本显示提示全文本
2301_76671906的博客
10-10 574
.三种空白字符，前端中需要空格 ，div内容超出处理等css小方法
文字多行展示超出部分省略号显示
m0_61134931的博客
06-10 1633
我们设置了弹性盒子显示为垂直方向，最多显示三行，超出部分显示为省略号。实现多行文字超出部分显示省略号可以使用 CSS 的。属性为需要显示的行数，使弹性盒子只显示指定的行数。，当文字超出一行时，将多余文本显示为省略号。，当文字超出一行时，将溢出部分隐藏起来。，强制在一行内显示所有文字。，使多行文本显示为弹性盒子。，使弹性盒子垂直排列。
text-overflow
weixin_33964094的博客
01-04 98
2019独角兽企业重金招聘Python工程师标准>>> ...
单行和多行文本省略号
2302_79245293的博客
10-27 225
核心css语句：(设置文字在一行显示不能换行)(顾名思义超出限定的宽度就隐藏内容)(规定当文本溢出时显示省略符号来代表被修剪的文本)
多行省略号（使用碰到问题解决）
ll13352976097的博客
03-05 670
html <div class="text">55555555555555555555555555555555555555555555555</div> css .text { width: 434rpx; //兼容浏览器，有些浏览器不设置宽度有问题 height: 88rpx; text-overflow: ellipsis; display: -web
css 多行文本溢出显示省略号
09-15
要实现多行文本溢出显示省略号，你可以使用CSS的`text-overflow`和`-webkit-line-clamp`属性结合使用。 首先，你需要设置文本容器的高度和行数限制。例如，将容器高度设置为固定值，并使用`-webkit-line-clamp`属性指定最大行数： ```css .text-container { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /* 显示的最大行数 */ max-height: 3em; /* 每行的高度 */ } ``` 然后，你需要确保文本容器内的文本不会换行，可以使用`white-space: nowrap`属性： ```css .text-container { white-space: nowrap; } ``` 这样就可以实现多行文本溢出时显示省略号。请注意，这种方法在部分浏览器上可能需要添加前缀`-webkit-`以实现兼容性。 另外，如果你希望在多行文本溢出时同时显示省略号和完整文本提示，你可以结合使用`::after`伪元素来创建提示内容。例如： ```css .text-container::after { content: "..."; /* 省略号 */ } ``` 希望这可以帮助到你！如有更多问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值