CSS 文本超出隐藏，并显示省略号

小跳不会Coding

已于 2022-12-09 14:52:11 修改

阅读量3.2w

点赞数 11

分类专栏： CSS样式文章标签： css css3 html

于 2021-10-28 18:44:18 首次发布

本文链接：https://blog.csdn.net/weixin_48596030/article/details/121020616

版权

CSS样式专栏收录该内容

17 篇文章 1 订阅

订阅专栏

可以使用overflow:hidden;来把超出的部分隐藏，
使用text-overflow:ellipsis;当文本对象溢出是显示为省略号。

以下是可直接使用的代码：
1.超出一行，隐藏文本并显示省略号

//超出一行省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

2.超出两行甚至多行，隐藏文本并显示省略号

//超出两行省略号
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

优惠劵

小跳不会Coding

关注关注

11
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
CSS 文本超出隐藏，并显示省略号

CSS 文本超出隐藏，并显示省略号
复制链接

扫一扫

专栏目录

Js 网页上反复显示隐藏效果的文本

10-29

一个JavaScript特效，在网页上反复显示一些可隐藏的文字，快速滚入而后快速消失，很不错的文字效果。

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

01-19

复制代码代码如下:<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><title>HTML5标签</title><style>p{/**white-space：nowrap;表示文本不会换行，在同一行继续，知道遇到标签为止；overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；text-overflow：ellipsis;当文本对象溢出是显示…，当然也可是设置属性为clip不显示点点点；-o-text-overflow:为了兼容opera浏览器;*/width:200px;overflow:hidd

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

css 文本超出就隐藏并且显示省略号

lee754922002_的博客

03-25

249

溢出用省略号显示。

css文本溢出显示省略号

热门推荐

weixin_55472979的博客

08-19

3万+

css文本溢出显示省略号

CSS实现单行或者多行文本溢出隐藏并且显示省略号

是程序喵呀

04-08

8838

如果文字超出父元素指定宽度，文字会自动换行，而连续不间断数字和英文字母（没有其他字符）不会自动换行；省略号：text-overflow: ellipsis;设置弹性盒子的子元素的排列方式：-webkit-box-orient: vertical;对于内核是webkit的浏览器（Google/Safari）,可以直接用CSS样式；设置显示文本的行数：-webkit-line-clamp: 5;溢出隐藏：overflow: hidden;

css 超出用省略号当标题字符溢出用省略号表示

09-25

列表由于标题过长而影响美观度，所以想让标题溢出的文字以省略号方式表现.此类文章网上会有很多，本文整理了一些经验技巧与大家共同分享，感兴趣的你可不要错过了哈，希望可以帮助到你

css文本超出隐藏

weixin_70348294的博客

09-15

4522

使用text-overflow:ellipsis;当文本对象溢出是显示为省略号。可以使用overflow:hidden;来把超出的部分隐藏，2.超出两行甚至多行，隐藏文本并显示省略号。1.超出一行，隐藏文本并显示省略号。

CSS文本溢出显示省略号

Jk200165的博客

07-03

8760

（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）-webkit-box-orient: vertical;（和 1 结合使用，设置或检索伸缩盒对象的子元素的排列方式）text-overflow: ellipsis;（多行文本的情况下，用省略号 “…display: -webkit-box;（和 1 结合使用，将对象作为弹性伸缩盒子模型显示）（文本溢出限定的宽度就隐藏内容）

css文本溢出隐藏并显示省略符号

weixin_68142594的博客

07-01

1980

相信小伙伴们在书写css代码时，会遇见文本溢出的情况，极大的影响了页面的布局。那小编就分享一下常用的两种文本溢出解决方案。

css超出隐藏

时漂亮的博客

02-19

2万+

1.单行超出隐藏 div { overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //用省略号显示 white-space:nowrap; //不换行 } 2.多行超出隐藏 div{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; // 从上

CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

09-24

下面小编就为大家带来一篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

纯css控制超出部分省略号显示

01-04

纯css 控制超出宽度部分用省略号显示，纯数字跟连续的英文字母请绕行。

CSS文本超出div或者span时用省略号代替

12-13

在项目中我们经常需要在文本过长时显示，将文本超出的部分内容用省略号代替：思想为：首先设置宽度，然后让超出的部分隐藏如果有超出则在最后显示省略号 让文本不换行具体css代码为：复制代码代码如下:.title{ width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:keep-all; } Html代码就不用写了，一个div 或者span class = "title"即可。

CSS文本超出2行就隐藏并且显示省略号

01-19

超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; //这个属性不是css的规范属性，需要组

CSS实现不换行/自动换行/文本超出隐藏显示省略号

08-11

CSS实现不换行/自动换行/文本超出隐藏显示省略号；自动换行，强制不换行，单行文本不换行多余文本显示省略号，第n行显示省略号,亲测有效。

【CSS】grid 布局一行自动填充，每行最大限定px

最新发布

日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

04-23

339

【代码】【CSS】grid 布局一行自动填充，每行最大限定px。

CSS基础——1.CSS样式

weixin_66370632的博客

04-23

691

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式行内样式：直接定义在 HTML 标签的 style 属性中

SCSS的基本使用(一)

大圣归来圣骑士清欢的博客

04-22

511

SCSS的基本使用、语法

CSS中的圆角和阴影

小何代码咖啡馆

04-21

1112

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。

css文本超出影藏省略号怎么下下面显示

10-08

要实现CSS文本超出隐藏并显示省略号的效果，你可以使用以下方法: 1. 单行显示省略号： ```css span { white-space: nowrap; /* 超出的空白区域不换行 */ overflow: hidden; /* 超出隐藏 */ text-overflow: ellipsis; /* 文本超出显示省略号 */ } ``` 2. 多行显示省略号： ```css span { position: relative; line-height: 1.4em; /* 行高和height成倍数，这里以三行文本超出隐藏举例 */ height: 4.2em; overflow: hidden; } span::after { /* 若要兼容IE8需用:after */ content: "..."; /* 替换内容比较灵活 */ position: absolute; bottom: 2px; right: 5px; padding: 0 3px; background: #fff; /* 颜色和文字背景保持一致 */ box-shadow: 0 0 10px #fff; /* 边缘处理 */ } ```

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交