多行文本溢出显示省略号

最新推荐文章于 2024-10-16 11:23:07 发布
最新推荐文章于 2024-10-16 11:23:07 发布
阅读量69 收藏
点赞数
文章标签： 前端 html javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddd239/article/details/128846992
版权
文章探讨了在HTML布局中，如何使用弹性盒子和定位伪元素来实现特定的显示效果。尽管弹性盒子在手机浏览器上的表现可能不理想，作者采用了第二种方法——利用定位伪元素并根据文本长度动态调整省略号的显示，但这种方法相对复杂。
摘要由CSDN通过智能技术生成

html 元素

 

方法一   弹性盒子 （手机浏览器不是很友好，还是实现不了效果，我使用的第二种方法） 

 方法二  定位 伪元素 遮盖 （我根据文本长度 判断 省略号 是否显示  => 方法笨）

效果图

 

荨麻疹.
关注
纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）
c11073138的博客
09-28 4945
1、单行文本溢出显示省略号 单行文本溢出显示省略号比较简单，设置white-space: nowrap避免换行，再设置text-overflow: ellipse即可。 <style> .single-line { width: 200px; line-height: 1.4; white-space: nowrap; overflow: hidden...
CSS实现单行、多行文本溢出显示省略号（…）
热门推荐
06-16 4万+
CSS实现单行、多行文本溢出显示省略号（...）
CSS基础： 单行和多行文本溢出显示省略号
u011863822的博客
03-11 5739
文本溢出后很多，会显示一些省略号，这个在很多网站都会这样做，从技术层次来分析有两种，一种是前端通过css或者JavaScript进行进行，还有一种是后端传递文字的时候，本身处理完长度，然后返回一个嗲有省略号的文字。 而这个放在CSS专栏聊，自然就会聊在CSS 中如何解决这个问题，在CSS中对于行数不同不可以分单行文本溢出和多行文本溢出。 单行文本溢出 如果解决文本溢出显示省略号，需要满足的三个条件： 先强制一行内显示文本 white-space:nowrap;/*默认normal 自动换行*/ 超
html中多行文本溢出,多行文本溢出显示省略号 - 纯css解决方案
weixin_34707242的博客
06-05 401
此方案支持IE，firefox，safari，chrome。效果如下overviewlive demo完整代码.ellipsis {overflow: hidden;height: 100px;line-height: 20px;background-color: aliceblue;}.ellipsis::before {content: "";float: left;width: 2em;he...
css多行文本溢出显示省略号
m0_54566205的博客
03-23 8398
在CSS中，对于多行文本的溢出显示省略号，可以使用display属性配合-webkit-line-clamp和-webkit-box-orient来实现。
css单行、多行文本溢出显示省略号
温情
03-17 308
单行 .box{ overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出时发生的事，ellipsis表示用省略号代替溢出的文本 white-space: nowrap; // // 规定段落中的文本不进行换行 } 多行 .box { overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 d
多行文本溢出显示省略号(…)
SailingCoder的博客
07-05 6593
多行展示以省略号(…)处理 在开发过程中会出现大量文字展示情况，一般都会做超过几行，剩余部分按照省略号展示。 单行展示 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行展示 WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）方可使用，有很大的兼容问题 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line
【css样式】单行、多行文本溢出显示省略号
流萤梦的博客
04-11 454
文本溢出显示省略号这个样式，我真的是逢写必忘，也是服了，简单整理一下： 单行文本 单行文本相对简单，三行代码就能搞定，喏： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然，这里有一个前提是要设置宽度width，敲重点！ 最后的效果图如下： 多行文本 方...
移动端的text-overflow多行文本溢出显示省略号(…)
12-10
本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。 首先，对于基于WebKit的浏览器（如Safari和Chrome，以及大部分移动端浏览器），我们可以利用WebKit的私有属性`-webkit-line-clamp`。这是一个不受...
CSS实现单行、多行文本溢出显示省略号的实现方法
09-22
在CSS中，实现文本溢出时显示省略号的方法分为单行文本溢出和多行文本溢出两种情况。这两种效果可以有效地处理页面内容超出预设区域时的显示问题，增强用户界面的整洁性。 一、单行文本溢出显示省略号 对于单行...
BInyLU#blognews#CSS实现单行、多行文本溢出显示省略号（…）1
07-25
实现方法：效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。实现方法：效果如图：适用范围：该方法适用范围广，但文字未
06_实现watch
qq_53109172的博客
10-16 1157
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 475
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端开发攻略---8种方法实现在浏览器中跨页面通信
nibabaoo的博客
10-15 1294
浏览器实现跨标签页通信的多种方式
前端地图数据开发
shuxiaoxii的博客
10-13 391
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 869
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值