css单行多出显示省略号

原创已于 2024-03-08 16:49:57 修改 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2021-10-31 20:59:05 首次发布

CSS 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了CSS中实现单行和多行文本超出隐藏并显示省略号的技巧。通过设置width、overflow、text-overflow和white-space属性，可以轻松实现单行文本的省略。对于多行文本，利用-webkit-line-clamp属性可以限制显示的行数，结合其他样式达到多行省略的效果。这些方法在网页布局和信息展示中非常实用。

实现这个效果的元素width属性需要有个固定的值，如果不是固定宽设置max-width、min-width也可以。

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行多出显示省略号

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Misnice

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS 单行 / 多行文本溢出省略全攻略：方法与实际项目代码示例

向着太阳迎着光

12-04

926

单行文本溢出的省略效果通常用于容器宽度固定且文本内容较长的场景。通过 CSS 的属性结合和overflow，可以实现单行文本溢出时显示省略号。在一些场景下，文本内容需要在固定高度的容器内显示，并且希望超出容器的部分被截断显示省略号。这通常应用于文章摘要、评论或商品介绍等。通过 CSS 的来截取指定行数的文本，适用于在多行容器内根据内容行数来进行溢出控制。相比基于高度截断，这种方法更具灵活性，可以控制具体显示的行数。

css 溢出隐藏显示省略号

XYX8958的博客

11-15

3326

限制在一个块元素显示的文本的行数。CSS3引入了-webkit-line-clamp。属性，这是一个非标准的属性，需要结合。：设置弹性盒子的方向为垂直。：在文本溢出时显示省略号。以隐藏超出容器的内容。：隐藏超出容器的部分。

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

CSS多余文本省略号显示

by2016的博客

11-02

405

CSS多余文本省略号显示本次案例代码是在 elementui 当中的 table 组件中实际需求当然使用的是纯 CSS3 代码，所以原生支持度高，兼容性高，所以可多场景应用对于过长文本进行单行省略显示，当鼠标移动到对应文本行时，展示全部，当鼠标离开后又恢复单行，多余内容收缩出现省略号 /deep/.el-table__row { .cell { //对超出内容隐藏 ...

css实现单行/多行文本超出显示省略号...

树上骑个猴的博客

12-18

220

css单行文本超出… overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本超出显示… display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;

单行文本和多行文本溢出显示省略号

3木子熙H

06-15

257

1.单行文本溢出显示省略号 white-space:nowrap; //强制一行内显示文本，禁止换行 overflow:hidden; //超出部分隐藏 text-overflow:ellipsis; //文本用省略号代替超出的部分 2.多行文本溢出显示省略号 多行文本溢出显示省略号，有比较大的兼容性问题，适合webkit浏览器或者移动端。 overflow:hidden; text-overflow:ellipsis; //接下来的几行代码有兼容性问题 //弹性伸缩盒子模型显示 display:-web

css多余文本省略号显示的实现

hugejihu9的专栏

01-08

440

文章来自：源码在线https://www.shengli.me/css/545.html

CSS控制文字只显示几行，超出一部分显示省略号

eileen823的博客

02-26

6000

.text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap; } .text2 { width:200p

css单行文本溢出显示省略号

热门推荐

m0_54566205的博客

03-23

1万+

这样就可以让单行文本溢出时显示省略号了。属性来实现单行文本溢出显示省略号。

CSS实现单行、多行文本溢出显示省略号（…）

07-26

CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看

CSS实现标题文字过长部分显示省略号的方法

09-24

以下将详细介绍如何使用CSS实现单行和多行文本溢出时显示省略号的方法。 ### 单行文本溢出显示省略号 对于单行文本溢出的情况，CSS已经提供了非常成熟的属性组合来实现这一需求，使用的是`text-overflow`、`...

CSS实现单行、多行文本溢出显示省略号的实现方法

09-22

在CSS中，实现文本溢出时显示省略号的方法分为单行文本溢出和多行文本溢出两种情况。这两种效果可以有效地处理页面内容超出预设区域时的显示问题，增强用户界面的整洁性。一、单行文本溢出显示省略号 对于单行...

css高级应用之三种方法实现多行省略

ysds20211402的博客

12-31

645

转自：微点阅读https://www.weidianyuedu.com/content/0617013787700.html 前言这是个老掉牙的需求啦，不过仍然有很多人在网上找解决方案，特别是搜索结果排名靠前的那些，都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案。如果你看到这篇文章，可能代表你正是从那么多千篇一律的文章中跳转过来的，想找更好地方案的。那恭喜你，没有更好的，只有更合不合适的，当然，前提是我的文章流量够多，能被顶上去你才有机会看到。这里介绍三种多..

多行文本溢出显示省略号(…)

alifj9932的博客

06-29

421

(单行)省略号： overflow: hidden;white-space: nowrap;text-overflow: ellipsis; （双行）省略号：overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; ...

解决span标签之间的空隙问题

Misnice的博客

10-22

2680

在html中，如果两个span之间换行书写的话，那么他们在页面上展现的时候往往会有空隙如： <div> <span>第一个标签文字</span> <span>第二个标签文字</span> </div> 解决方案： 1.将两个span标签写在同一行 <div> <span>第一个标签文字</span><span>第二个标签文字</span> </

flex布局常用属性

Misnice的博客

09-16

2222

弹性盒（Flexible Box）是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(父级元素)和弹性子元素(子级元素)组成。弹性容器通过将父级元素设置 display 属性的值为 flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。先简单写个栗子： <!DOCTYPE html>

flex布局中子元素内容超出时，子元素本身出现滚动条实现方法

Misnice的博客

07-02

2068

flex布局中子元素宽度平均分配，并且当子元素内容超出时，子元素本身出现滚动条

CSS实现三角形带阴影效果

Misnice的博客

07-27

1380

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS实现带阴影效果的三角形</title> <style> .box { position: relative; width: 600px;

css将背景设置为透明色

Misnice的博客

11-15

1160

background-color:transparent；

react项目如何引入字体文件

Misnice的博客

04-25

1128

项目中如何引入字体文件

css超出单行显示省略号