css文档超出部分隐藏并显示省略号

最新推荐文章于 2024-01-25 14:06:28 发布
原创 最新推荐文章于 2024-01-25 14:06:28 发布 · 468 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #html5

本文介绍如何利用CSS3属性实现当文本超出指定宽度时显示省略号的效果，通过结合使用overflow与text-overflow属性，并配合<nobr>标签防止文本换行。

今天一组排版文字太多需要隐藏并且显示省略号，知道css3中overflow与text-overflow使用，但只有隐藏并没有省略号，第一次把这两个组合起来用，后面加了<nobr>不换行，所以OK了。下面贴出源码：

#pcss {width:150px;height:24px;
overflow:hidden;text-overflow:ellipsis;    
}        
   
<p id="pcss"><nobr> 显示不完显示省略号，测试内容</nobr></p>  

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文本超出指定宽度后隐藏并显示为省略号的实现方法
12-13
一般的文字截断（适用于内联与块）： CSS Code复制内容到剪贴板 .text-overflow {           display:block;/*内联对象需加*/            width:25em;           word-break:keep-all;/* 不换行 */            whitewhite-space:nowrap;/* 不换行 */           overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */         
css文本超出隐藏
weixin_70348294的博客
09-15 5081
使用text-overflow:ellipsis;当文本对象溢出是显示为省略号。可以使用overflow:hidden;来把超出的部分隐藏，2.超出两行甚至多行，隐藏文本并显示省略号。1.超出一行，隐藏文本并显示省略号。
css 超出隐藏显示省略号
周家大小姐
10-22 747
以下三个需要配合使用:  text-overflow: ellipsis; //字体超出用省略号显示  overflow:hidden; // 超出隐藏 white-space:nowrap // 不换行   div{ text-overflow: ellipsis; overflow: hidden; ...
css超出隐藏显示省略号
yycc的博客
04-21 451
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; word-break: break-all; /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */
css把超出的部分显示为省略号的方法兼容火狐
12-11
标题中的“css把超出的部分显示为省略号的方法兼容火狐”是指在CSS样式中，如何设置文本超出指定宽度时显示省略号，并确保这种方法在Firefox浏览器中也能够正常工作。这种技术通常用于限制长文本在有限的空间内展示...
CSS省略号text-overflow超出溢出显示省略号
12-04
标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时，用省略号表示被截断的文本。 `text-overflow`属性有以下几...
CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现
09-24
在本篇文档中，我们将深入学习如何使用CSS控制文本的显示方式，具体来说是如何实现当文本超出指定宽度时，在文本的末尾显示省略号，并且文本不换行。这种效果在网页设计中非常常见，它能够帮助我们优雅地处理那些...
使用text-overflow:ellipsis实现文字超出用省略号显示
09-25
具体来说，要实现文字超出用省略号显示的效果，可以按照以下步骤进行设置： 1. `white-space: nowrap;` 这个属性值设置使得文本不会换行，所有内容都在一行内显示。 2. `overflow: hidden;` 此属性设置隐藏超出元素...
css li 超出隐藏代码
10-30
`将隐藏文本中超出容器宽度的部分，而显示部分则以省略号形式出现。 需要注意的是，上述方法在不同浏览器中可能有不同的支持情况。根据描述，此方法至少适用于IE和Opera浏览器。在使用CSS属性控制内容显示时，应...
超出部分隐藏以省略号表示
weixin_45732391的博客
08-16 287
超出部分隐藏以省略号表示 一、超出一行 html <div style="width:20%;white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;">这是一段很长的文字，当容器放不下则会出现省略号。这是一段很长的文字，当容器放不下则会出现省略号。这是一段很长的文字，当容器放不下则会出现省略号。 </div> 效果 二、超出二行 html
css 文本超出隐藏显示省略号
A535366的博客
01-10 320
1.大部分浏览器这个就可以解决 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 2.当有俩行内容时候用，并且兼容方式 width: 8.4rem; //超出这个宽度就变成省略号 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; //作为
css文本超出隐藏显示省略号
qq_45284875的博客
07-17 196
//单行文本...隐藏 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 //多行文本...隐藏 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; ...
前端css文本超出隐藏或显示省略号的多种方式
热门推荐
丘比特没有箭的博客
01-25 1万+
前端css文本超出隐藏或显示省略号的多种方式
文字超出部分隐藏，并显示省略号
weixin_30642029的博客
09-26 199
p{ white-space:nowrap; text-overflow:ellipsis; overflow:hiddle; } 转载于:https://www.cnblogs.com/yuanxinru321/p/9706638.html
css 文字超出隐藏，显示省略号
王博的博客
05-28 682
效果图： 1. 单行 .text-overflow-ellipsis { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 2. 多行 .text-overflow-ellipsis-line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;//设置行数
文字超出部分隐藏并有省略号
happyyang303的博客
03-30 251
width: 400rpx;//不超过多宽就要隐藏 overflow: hidden; word-break: break-all;/* break-all(允许在单词内换行。) */ text-overflow: ellipsis; /* 超出部分省略号 */ ...
CSS中的文字超出隐藏显示省略号
前端菜鸡的博客
08-27 733
①单行超出隐藏 p { width: 200px; /* 宽度自定义 */ white-space: nowrap; /* 单行显示，不换行 */ overflow: hidden; /* 超出隐藏 */ text-overflow: ellipsis;/* 显示点 */ } 需要注意的是记得给宽度，不然达不到省略的效果 效果如下： ②多行超出隐藏 p { overfl...
css多行溢出隐藏显示省略号
最新发布
01-07
对于多行文本溢出时隐藏部分内容并显示省略号的需求，在现代Web开发中有多种方法可以达成此目的。一种常见的方式是在特定容器上应用一系列CSS样式，以确保当内容超过指定高度或行数时能够优雅地截断，并附带省略号。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值