隐藏多余的字用 “省略号” 代替

最新推荐文章于 2022-03-14 11:00:59 发布

LDH-

最新推荐文章于 2022-03-14 11:00:59 发布

阅读量2.8k

点赞数 1

分类专栏： css 文章标签：隐藏多余的字用省略号代替 css省略号省略号

本文链接：https://blog.youkuaiyun.com/weixin_38362146/article/details/78036080

版权

css 专栏收录该内容

7 篇文章

订阅专栏

在前端经常会遇到类似的效果。比如图中的“风花雪月与古镇火山-.....”后面“....”就是一段文字显示不下的时候默认隐藏然后用…来代替。
这里写图片描述
只需要给元素加上以下3个css属性就可以实现了。

            overflow: hidden;//多余的隐藏            text-overflow:ellipsis;//多出来的用省略号代替            white-space: nowrap;//不换行
 
 1
2
3

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LDH-

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

微信小程序实现指定显示行数多余文字去掉用省略号代替

10-18

以上所述就是微信小程序实现指定显示行数多余文字去掉用省略号代替的方法，希望对正在从事微信小程序开发的朋友们有所帮助。在实际开发中，还需考虑文本内容的长度、用户的交互体验等细节问题，以达到最佳的显示效果...

使用CSS不用程序实现文字自动截断用省略号代替

10-30

使用CSS实现文字自动截断用省略号代替在Web开发中，经常需要对文字进行截断，以便适应不同的屏幕尺寸和布局。传统的方法是使用JavaScript来实现文字截断，但这需要编写复杂的代码并且需要考虑浏览器的兼容性问题。...

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

CSS实现多余文字用省略号代替

MT_su的博客

09-09

5721

.txt{ background: gainsboro; width: 200px; //设置文字显示宽度 overflow: hidden; //溢出内容隐藏 white-space: nowrap; //强制文本在一行内显示 text-overflow: ellipsis; //当对象内文本溢出时显示省略标记 } <p class="txt">C...

怎么把多余文字转化为省略号？

05-10

309

先看看最简单的，利用text-overflow:ellipsis实现单行文本溢出显示省略号效果 1 overflow: hidden; 2 text-overflow: ellipsis;//clip|ellipsis3white-space: nowrap; 效果如下：所有主流浏览器都支持 text-overflow 属性。但这个属性仅适用于单行文本，多...

单元格内多余的文字用浮字显示 .......

a363722188的专栏

10-22

778

有的表格的一个单元格中的文字内容很多很多导致

文字多余隐藏

小小博客

03-14

173

display: -webkit-box; // 将元素和转化为谷歌的盒子 -webkit-line-clamp: 2; // 最多两行 overflow: hidden; // 超出的文本隐藏 text-overflow: ellipsis; // 将超出的文本转化为... -webkit-box-orient: vertical; // 盒子内容排列方式是纵向 text-indent: 2em; // 首行缩进连个字 -webkit- 加上各浏览器私有前缀 .

css div多余文字用省略号代替

xyr05288的专栏

01-13

1万+

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

10-20

在本文中，我们将探讨如何使用JavaScript和CSS技术实现当网页中的文本内容超出设定的长度时，自动用省略号(...)来代替超出部分，并且当用户将鼠标悬停在该文本上时，显示完整的文本信息。这通常是在网页设计中用来...

CSS超出文本指定宽度用省略号代替和文本不换行

09-24

本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时，可以使用以下CSS样式： ```css .text-overflow { ...

多余文字隐藏，悬浮显示

then啥

01-17

1180

width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:hover{ overflow: visible; }

前台页面多余字体隐藏问题

qq_20453707的专栏

01-01

282

.p1{ text-align: center; color:#C8CFD6; height:34px; text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: ver

Css溢出隐藏

weixin_34090562的博客

08-10

2078

display: -webkit-box;-webkit-line-clamp: 2; /*多少行数之后显示为省略...*/word-wrap: break-word;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical; displa...

div展示字数超过一定数量用省略号代替

豆豆哥哥的博客

08-28

6525

原来是这样：字数多的话会换行，但是这是一个新闻发布的标题啊~~ 所以加上样式： width: 400px; //宽度固定 overflow: hidden; //超出部分隐藏 text-overflow: ellipsis; //用省略号 white-space: nowrap; //不换行但是谷歌大大不认：是没有换行，可是就只是...

vue实现内容过多隐藏，点击显示

ruantianqing的博客

01-12

4156

html Description是介绍的具体内容 <div class="introduce">介绍：{{Description}}</div> <div class="more" v-if="!isShowAll && isRoll" @click="toDown">展开<i class="iconfont icon-up2-copy"></i></div> <div class="more" v-if="!is

html5多出来的字自动隐藏并显示...

weixin_34192732的博客

11-18

741

本文转自毒逆天博客园博客，原文链接：http://www.cnblogs.com/dunitian/p/4984881.html，如需转载请自行联系原作者 ...

td长度固定，内容过长，超过部分用省略号代替