css 样式文字溢出显示省略号

最新推荐文章于 2024-08-03 20:42:48 发布

huangzijuan1

最新推荐文章于 2024-08-03 20:42:48 发布

阅读量2.6w

点赞数

分类专栏：网页布局文章标签： css

本文链接：https://blog.csdn.net/huangzijuan1/article/details/6079980

版权

网页布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原本以为文字溢出的处理比较复杂，没想到这么一简简单单的一句话就搞定了，css真是神奇：

.li { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

现在学习希望搞清楚每个具体的属性的意思，存在脑子里，以后就可以顺手写出来啦！

查阅了下，属性如下：

white-space：nowrap;表示文本不会换行，在同一行继续，知道遇到<br>标签为止；

overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；

text-overflow：ellipsis;当文本对象溢出是显示...，当然也可是设置属性为clip不显示点点点；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

huangzijuan1

关注关注

0
点赞
踩
4

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS实现溢出显示省略号

sdasadasds的博客

12-27

3719

小伙伴们，对于省略号呢，咱们前端攻城狮的实现方法可就是多种多样了，那接下来呢我就给你罗列一下如果用css书写这些特殊效果，来一起看看吧~~~ 1.单行文本超出显示省略号 效果图：实现代码: HTML部分 <h3>使用css实现单行省略号</h3> <div class="box1"> <a href="#" class="a1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ips

判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号

10-17

总之，实现“判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号”的功能，需要结合CSS的溢出省略策略与JavaScript的动态交互处理。通过这样的方式，我们可以为用户提供更好的阅读体验，同时保持界面...

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

css样式显示省略号

酒比花香的专栏

04-18

957

用css样式显示省略号，记 .xx{ display: block; width:200px;/*对宽度的定义,根据情况修改*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 效果图

溢出的文字省略号显示

goforword的博客

06-25

151

css解决文本溢出的方法

【小技巧】CSS如何实现文字溢出显示省略号

最新发布

qq_65034569的博客

08-03

493

是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。

单行文字溢出隐藏显示省略号

m0_62823653的博客

03-04

1601

单行文字溢出隐藏显示省略号 1.让换行的文字强制在一行显示。属性white-space: nowrap; 2. 溢出的部分隐藏。overflow: hidden； 3.文字溢出显示用省略号。text-overflow: ellipsis; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv...

多行文本与一行文本溢出省略号显示

起小点

04-25

363

多行文与一行文本溢出省略号显示 1.多行文本溢出省略号显示 -webkit-line-clamp: 2; //2行后省略号显示 -webkit-box-orient: vertical; //子元素应该被水平或垂直排列 display: -webkit-box; overflow: hidden; 2.一行文本溢出省略号显示 overflow:hidden; white-sp...

web知识笔记

szb0312的博客

09-07

234

web笔记

css实现文本溢出显示省略号

09-25

本知识点介绍如何使用CSS实现文本溢出显示省略号的效果。这种方法不仅能够保持页面的整洁性，还可以避免因文本溢出而造成用户界面的混乱。在CSS中，我们可以通过组合几个属性来实现这一效果，包括`white-space`、`...

CSS省略号text-overflow超出溢出显示省略号

12-04

标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时，用省略号表示被截断的文本。 `text-overflow`属性有以下几...

css设置文本溢出显示省略号的样式

weixin_44471622的博客

04-03

485

文本溢出分为两种情况，一种是单行文本溢出，一种是多行文本溢出。单行文本溢出显示省略号 width: 140px; //宽度必须要加上 white-space: nowrap; //不换行 overflow: hidden; text-overflow: ellipsis; //省略号“…”隐藏超出范围的文本 display: inline-block; //如果不是行内样式，需要转成行内样式...

CSS设置溢出文字显示省略号

izwell的博客

10-08

1294

文章目录CSS设置溢出文字显示省略号相关CSS``overflow:hidden````white-space:nowrap````text-overflow:ellipsis`` CSS设置溢出文字显示省略号 相关CSS .text-ellipse{ width: 100px; height:50px; border:2px solid red; overflow:h...

css 设置文字溢出部分使用省略号代替

Novice-XiaoSong的博客

08-08

384

/* 溢出的文字直接省略 */ { white-space:nowrap; /* 文本不换行 */ overflow-x: hidden; /* x方向溢出部分隐藏 */ text-overflow:ellipsis; /* 溢出使用省略号表示 */ }

文字只显示一行溢出...

xiaohong的博客

05-25

393

display: inline-block; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;

CSS中的单行、多行文本溢出总结

前端学习博客

01-15

8832

单行文本溢出和多行文本溢出

Dilemma_me的博客

08-28

228

单行文本溢出： .box{ width:80%;//宽度必须有 overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } 多行文本溢出： .box{ display:-webkit-box; overflow:hidden; 　text-overflow:ellipsis; 　word-break:break...

可能是最全的 “文本溢出截断省略” 方案合集

u011497228的博客

11-07

346

文章目录引言先来点基础的，单行文本溢出省略核心 CSS 语句优点短板Demo示例图片进阶一下，多行文本溢出省略（按行数）纯 CSS 实现方案核心 CSS 语句优点短板适用场景Demo示例图片基于 JavaScript 的实现方案优点短板适用场景Demo再进阶一步，多行文本溢出省略（按高度）多行文本溢出不显示省略号核心 CSS 语句优点短板适用场景Demo示例图片伪元素 + 定位实现多行省略核心 C...

html文字超过部分显示为省略号