-
2022-03-08 19:23:45
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单行文本溢出显示省略号</title> <style> div { width: 150px; height: 80px; background-color: aqua; margin: 100px auto; /* 1、nowrap：不允许换行，强制一行显示 */ white-space: nowrap; /* 2、溢出部分隐藏 */ overflow: hidden; /* 3、text-overflow：ellipsis；文字溢出的时候用省略号来显示 */ text-overflow: ellipsis; } </style> </head> <body> <div>啥也不说了，此处省略一万字</div> </body>效果图如下：
更多相关内容 -
CSS实现单行、多行文本溢出显示省略号（…）
2019-07-26 11:37:23CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看 -
CSS单行文本溢出显示省略号
2022-01-22 12:37:21如何让单行文本溢出显示省略号呢？ 操作步骤 建立简单的html样式 第一步：限定范围 width:; 第二步：强制文本不换行 white-space:nowrap; 第三步：溢出隐藏 overflow:hidden; 第四步：显示省略号 ...展开全文如何让单行文本溢出显示省略号呢？
操作步骤
建立简单的html样式
第一步：限定范围 width:;
第二步：强制文本不换行 white-space:nowrap;
第三步：溢出隐藏 overflow:hidden;
第四步：显示省略号 text-overflow:ellipsis;
可以看到，效果已经达到了。
知识拓展
白色空间的处理（white-space）
white-space:nowrap; 忽略空白符，一行显示到底 white-space:pre; 保留所有空白符不换行 white-space:pre-line; 合并空白符，保留换行符 white-space：pre-wrap； 保留所有空白符，保留换行符 溢出处理（overflow）
overflow:hidden; 溢出隐藏 overflow:auto; 如果溢出才有滚动条 overflow:scroll; 不管溢出还是不溢出都有滚动条 overflow:visible; 默认值 显示省略号（text-overflow）
text-overflow:ellipsis; 显示省略号 text-overflow:clip; 默认值 
-
CSS实现单行、多行文本溢出显示省略号
2022-04-06 19:59:54CSS实现单行文本溢出显示省略号 white-space: nowrap; // 文本不换行 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出显示省略号 效果： CSS实现多行文本溢出显示省略号 display: -webkit-box...展开全文CSS实现单行文本溢出显示省略号
white-space: nowrap; // 文本不换行 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出显示省略号效果：
CSS实现多行文本溢出显示省略号
display: -webkit-box; // 设置弹性伸缩盒子模型 -webkit-box-orient: vertical; // 设置子元素排列方式 -webkit-line-clamp: 3; // 限制在一个块元素显示的文本行数 overflow: hidden; // 溢出隐藏效果：
如果在项目中配置了autoprefixer，webpack打包vue项目时，-webkit-box-orient: vertical; 会被自动忽略。
在 -webkit-box-orient: vertical 之前添加注释关闭autoprefixer，然后再开启：
display: -webkit-box; // 设置弹性伸缩盒子模型 /*! autoprefixer: off */ -webkit-box-orient: vertical; // 设置子元素排列方式 /*! autoprefixer: on */ -webkit-line-clamp: 3; // 限制在一个块元素显示的文本行数 overflow: hidden; // 溢出隐藏注意：文本容器需要设置宽度width，多行文本要根据实际情况设置高度height。
-
【用CSS让单行文本溢出显示省略号】
2022-04-20 10:36:28如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-color:pink; 2.默认值,文字换上 white-space:normal; 3.让文字强制在一行显示 ...展开全文如何用CSS让单行文本溢出显示省略号
<style>
p {
1.设置宽高
width:160px;
height:20px;
font:size:16px;
background-color:pink;
2.默认值,文字换上
white-space:normal;
3.让文字强制在一行显示
white-space:nowrap;
4.让溢出的文字隐藏
overflow:hidden;
5.超出部分用省略号代替
text-overflow:ellipsis;
}
</style>
<body>
<p>和平精英新春版本贺岁片《龙狮城传说》今日上映！</p>
</body>
-
CSS实现单行、多行文本溢出显示省略号的实现方法
2020-09-22 16:52:24如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览 -
css实现单行，多行文本溢出显示省略号
2021-04-21 18:35:10文章目录一、溢出属性（overflow）二、空余空间（white-space）三、省略号显示（text-overflow）三、单行文本溢出时显示省略号四、多行文本溢出时显示省略号总结 一、溢出属性（overflow） overflow:visible/hidden... -
CSS基础： 单行和多行文本溢出显示省略号
2022-03-11 11:34:31文本溢出后很多，会显示一些省略号，这个在很多网站都会这样做，从技术层次来分析有两种，一种是前端通过css或者JavaScript进行进行，还有一种是后端传递文字的时候，本身处理完长度，然后返回一个嗲有省略号的文字... -
css 单行文本溢出显示省略号
2022-04-01 19:10:13css单行文本溢出显示省略号 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -
css单行文本溢出显示省略号 css多行文本溢出显示省略号（鼠标悬停显示全部内容）
2021-05-29 12:40:50css单行文本溢出显示省略号 css多行文本溢出显示省略号（鼠标悬停显示全部内容） <template> <div> <!--单行文本溢出 --> <h2>单行文本溢出</h2> <div class="box1"> <... -
css之单行文字溢出省略号显示
2021-11-01 11:14:39单行文本溢出显示省略号——必须满足三条件 //1.强制一行内显示文本 white-space：nowrap;(默认自动换行) //2.超出部分隐藏 overflow：hidden; //3.文字用省略号代替超出部分 text-overflow：ellipsis； <!... -
CSS · 单行、多行文本溢出显示省略号
2021-06-30 16:54:07单行文本的溢出 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 适用范围： 因... -
CSS 实现单行、多行文本溢出显示省略号（…）
2020-08-09 12:17:151、单行文本溢出显示省略号 直接用 css 属性 text-overflow: ellipsis; 设置： { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2、多行文本溢出显示省略号 直接用 css 属性 -webkit-... -
CSS实现单行文本、多行文本溢出显示省略号
2019-11-13 16:08:48CSS实现单行文本、多行文本溢出显示省略号 单行文本 我们都知道要让文本溢出显示省略号是要用 text-overflow: ellipsis 这个属性的，当然还要配合其他的几个必要属性： 实现方式： width: 100px; // 限制宽度，限定... -
CSS单行文本以及多行文本溢出显示省略号解决方案
2021-01-23 21:15:07文章目录CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果：仅显示3行文本溢出部分显示省略号第二种效果：仅显示3行文本溢出部分显示省略号，并且鼠标上浮显示... -
css中关于单行文本溢出部分用省略号显示
2021-06-30 19:58:42关于单行文本溢出使用省略号显示主要分为四个步骤： 1、设置宽度： width：**px； 2、强制该文本不换行： white-space:nowrap; 3、溢出隐藏： overflow:hidden; 4、文本溢出显示为省略号： text-overflow:... -
学习 CSS 文本溢出显示省略号
2021-08-09 17:23:19单行文本显示省略号 <!DOCTYPE html> <html lang="en"> <style> .text { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> <body& -
css单行溢出显示省略号
2014-04-09 11:36:23text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; -
CSS实现溢出显示省略号
2021-12-27 10:26:271.单行文本超出显示省略号 效果图： 实现代码: HTML部分 <h3>使用css实现单行省略号</h3> <div class="box1"> <a href="#" class="a1">Lorem ipsum dolor sit amet consectetur ... -
CSS怎么实现单行、多行文本溢出显示省略号
2021-08-05 01:07:39CSS怎么实现单行、多行文本溢出显示省略号发布时间：2021-03-19 11:30:38来源：亿速云阅读：99作者：小新小编给大家分享一下CSS怎么实现单行、多行文本溢出显示省略号，相信大部分人都还不怎么了解，因此分享这篇... -
单行文本溢出显示省略号
2022-03-15 20:47:24写页面的时候会经常看见一行文本后面跟了省略号，其实不是文本后面直接写…实现的，而是当文本超出了页面显示的宽度时，自动显示省略号。 案例：实现文本超出一行后，其余内容显示省略号 下图是初始效果图 给父元素... -
css单行或多行文本溢出显示省略号
2017-04-08 10:17:50一、单行文本溢出省略 二、多行文本溢出省略 1、适用于WebKit浏览器及移动端； 2、兼容各版本浏览器 -
学习css文本溢出显示省略号？
2022-04-24 17:23:38今天携程面试，问题是这样的有一个span标签，其宽度为100px,我们需要给其设置文本，并且让其单行显示，超出部分使用省略号表示，当我们鼠标悬停在说上面的时候，然后再进行展示全部文本。但是我不会，很尴尬。下面... -
css文本溢出显示省略号
2021-03-28 09:49:18/*文本溢出显示省略号*/ 多行文本 display: -webkit-box; -webkit-line-clamp: 2;/*文本显示两行*/ -webkit-box-orient: vertical; overflow: hidden;/*溢出隐藏*/ text-overflow: ellipsis;/*文本溢出显示省略号*/ -
CSS单行文本溢出显示省略号（…）
2019-05-10 10:13:35可以设置文本溢出显示省略号 ~~~ .wrap{ width: 200px; // 文字容器宽度 overflow: hidden; // 超出边框外隐藏 text-overflow:ellipsis; // 属性规定当文本溢出包含元素时发生的事情。 white-space: nowrap; /... -
CSS 单行／多行文本溢出显示省略号（...）的实现
2020-09-30 19:09:11而这个需求可以分解为两个，一个是单行溢出省略，一个是多行溢出省略。下面我们就开始一起学习吧！ 实现文本超出显示省略号的常见属性 1）overflow: hidden 这里我们需要注意到一点：这里的overflow并不是设置为... -
CSS文本溢出显示省略号怎么实现？
2022-01-31 10:23:02我们经常会遇到网页中有文字溢出会显示省略号，那么这种效果怎么实现呢？本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法。 -
CSS文本溢出显示省略号
2020-03-12 13:42:23文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略 </div> 这段html不添加样式的显示如下： 文本... -
css样式：单行与多行文本溢出显示省略号
2021-11-18 21:55:39在css中经常会遇到需要显示一行文字，但文字过多显示不完，就需要用到单行文本溢出显示省略号。 在css中经常会遇到需要显示多行文字，但文字过多显示不完，就需要用到多行文本溢出显示省略号。 单行文本溢出显示... -
css 文本溢出显示省略号（单行和多行），解决react项目多行文本溢出显示省略号
2021-08-12 19:18:11单行 .text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } ... //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。... //可以用来多行文本的情况下，用省略号“…”隐藏
收藏数
4,370
精华内容
1,748