css中text文字超出宽度省略号显示并鼠标悬停显示剩余全部：

Ciwei蓝

已于 2022-04-24 16:33:25 修改

阅读量1.5k

点赞数

分类专栏： 2022css学习笔记文章标签：前端 vue.js css

于 2022-04-18 10:28:22 首次发布

本文链接：https://blog.csdn.net/Blue54/article/details/124243401

版权

2022css学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS实现文字在有限空间内显示省略号，当鼠标悬停时显示完整内容的技术。通过`display: -webkit-box`、`overflow: hidden`等属性组合，可以优雅地处理长文本显示问题，同时提供了一种在不牺牲用户体验的情况下展示大量信息的方法。

摘要由CSDN通过智能技术生成

代码：记得写在渲染文字的那个标签class上：

  display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      white-space: normal !important;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;

鼠标悬停在div上显示不用省略号的全部内容：

<div :title='展示的内容'></div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ciwei蓝

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS段落文字只显示一行，超出部分显示省略号，鼠标悬浮显示全部段落内容

ʚ菲菲的博客ɞ

07-06

5471

CSS段落文字只显示一行，超出部分显示省略号，鼠标悬浮显示全部段落内容 1. 给段落设置属性 .longlinedots{ max-width: 900px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } max-width: 900px; // 设置容器最大宽度 white-space: nowrap; // 设置段落文本不换行(不换行才有可能行溢出)； overflow: hidden; //

微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮

xiaoliliaq的博客

05-11

3900

微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能，产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里，就像微信朋友圈那样，我们叫班级圈。用户发班级圈时，可以发布文字内容、图片、视频，文字可以输入500个字。这样的话，如果列表一次展示全部文字，如果用户真有500个文字就基本一条动态占用了整屏高度，对于用户体验来说，用户一眼看到的东西太少了，所以产品就提出了需要折叠文字需求，并说明文字需要满6行的时候折叠，并显示全文按钮，当用户点击全文按钮时要展开所有内容，当点击收起

参与评论您还未登录，请先登录后发表或查看评论

CSS文字超出用省略号...鼠标悬停显示全部文字

qiudechao1的博客

11-06

3万+

CSS设置属性 .f-els3{width: 6.6rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: left;} .f-els3_3{width: 1.5rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;...

css文字超出长度用省略号代替,鼠标悬停并以悬浮框显示

qq_40656662的博客

11-15

3297

https://blog.csdn.net/fukua2017/article/details/100125242

CSS特效花样鼠标悬停效果

热门推荐

麻花猫耳朵的博客

12-14

4万+

实现文本超长以省略号的形式隐藏文本，达到不影响其他元素布局的效果；包括多行和单行文本的省略显示，以及应用此功能时，需要注意的属性之间冲突。

Css实现数据过多...显示，鼠标悬浮时显示完整信息

星星点灯的博客

06-14

1477

显示宽度内数据 div{ width: 70px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 显示完整数据 div:hover{ text-overflow:inherit; overflow: visible; white-space: pre-line; /*合并空白符序列，但是保留换行符。*/ } ...

css单行文本溢出显示省略号 css多行文本溢出显示省略号（鼠标悬停显示全部内容）

weixin_47144417的博客

05-29

753

css单行文本溢出显示省略号 css多行文本溢出显示省略号（鼠标悬停显示全部内容） <template> <div>  <h2>单行文本溢出</h2> <div class="box1"> <ul> <li title="全部内容展示：文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1"&gt

Css实现省略号...及悬浮层显示全部内容的方法：

weixin_45552104的博客

08-01

1473

css

鼠标移动到加号上显示隐藏的文字内容

06-12

在网页设计和开发中，有时候为了页面的整洁和美观，我们常常需要对较长的文本进行截断处理，只显示部分内容，而剩余的部分则通过“...”省略号来表示。这种设计方法可以让用户快速浏览页面，同时保持界面的清晰。...

使用text-overflow:ellipsis实现文字超出用省略号显示

09-25

字超出规定范围时，可以用省略号显示，这里我们可以使用text-overflow:ellipsis来实现省略号显示，下面有个不错的示例，感兴趣的朋友可以参考下

HTML、CSS、HTML5、CSS3认识

weixin_43689726的博客

08-08

697

初步认识html和css的常见标签，常见问题

web前端之CSS3

hu0708的博客

08-03

1032

css3

CSS与CSS3美化页面

AllenCode7的博客

12-27

1348

目录一、CSS简介1.1 什么是CSS?1.2 样式层叠次序二、CSS基础语法三、CSS使用方式四、CSS常用选择器五、CSS关系和属性选择器六、CSS伪类选择器七、CSS的尺寸和单位八、CSS字体与文本属性九、CSS背景属性十、CSS边框属性十一、CSS内外补白属性十二、CSS盒子模型实例十三、CSS定位属性十四、CSS布局属性十五、CSS实现导航十六、CSSflex弹性盒子介绍十七、CSS用户界面和多栏属性介绍十八、CSS表格和过度属性介绍十九、CSS旋转动画和媒体查询属性介绍二十、CSS字体图标的使用

css实现文字太长以省略号显示，鼠标悬停时所隐藏的文字出现，挪开继续隐藏

南野子

09-07

1846

省略号显示文字： <div class="collect">文字内容文字内容文字内容文字内容文字内容</div> 设置文字省略号显示css属性： .collect{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 鼠标停留显示隐藏文字css属性： .collect:hover{ text-overflow:inherit; overflow: visible;

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示

weixin_41869893的博客

05-20

4338

题目中问题一拆为二: 文字在超出长度时,如何实现用省略号代替? 超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容！ html代码如下： <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis">用CSS实现超长字段被省...

Css文本溢出显示省略号，鼠标悬浮提示

m0_63223221的博客

07-27

1660

overflow: hidden //超出部分隐藏 text-overflow:ellipsis // text-overflow用于控制文本内容在容器宽度内的显示方式，有三种属性值：clip剪切文本；//将内容分成多少行。

css实现div文本溢出显示省略号，鼠标悬浮时显示完整内容的tooltip

weixin_51953261的博客

05-15

1279

1. 设置容器不换行且溢出时隐藏，设置文字溢出时显示省略号；2. div添加title属性以显示完整内容。

js 文字超出部分用省略号替代 鼠标悬停时显示全部内容

08-31

JS文本超出部分用省略号替代的需求经常在网页设计中出现。这样做可以有效地减少页面上冗长的文本显示，并给用户一个快速浏览的体验。一种常见的解决方案是使用CSS的文本溢出属性，结合JavaScript的悬停事件来实现。首先，在CSS中定义文本溢出样式。使用`text-overflow:ellipsis;`属性可以让超出部分的文本显示省略号，同时，设置`white-space: nowrap;`属性可以防止文本换行。接下来，在HTML中声明需要添加省略号的文本元素，并添加一个自定义的class名称，例如`ellipsis-text`。然后，在JavaScript中编写相关的处理逻辑。首先，获取所有带有class名称为`ellipsis-text`的元素。然后，对每个元素绑定悬停事件，当鼠标悬停在文本上时，将元素的`title`属性设置为元素的全部文本内容，以显示完整的文本。当鼠标离开时，将`title`属性重置为空，以显示省略号。下面是一个简单的实现示例： HTML部分： ```html <div class="ellipsis-text">这是一个超出部分用省略号替代的示例文本。</div> ``` CSS部分： ```css .ellipsis-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` JavaScript部分： ```javascript var elements = document.getElementsByClassName('ellipsis-text'); Array.prototype.forEach.call(elements, function(element) { element.addEventListener('mouseover', function() { element.title = element.innerText; }); element.addEventListener('mouseout', function() { element.title = ''; }); }); ``` 通过以上步骤，当鼠标悬停在文本上时，会显示全部的文本内容；鼠标离开时，文本又会被替换为省略号，从而实现了需求的功能。