隐藏多余的文字变为...

最新推荐文章于 2021-03-23 17:49:10 发布
原创 最新推荐文章于 2021-03-23 17:49:10 发布 · 5.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css #隐藏多余文字

本文介绍如何使用 CSS 实现当文字超出容器时自动隐藏并以省略号代替的效果。通过设置 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 这三个属性即可轻松实现这一常用前端功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在前端经常会遇到类似的效果。
这里写图片描述
就是一段文字显示不下的时候默认隐藏然后用…来代替。
只需要给元素加上以下几个css属性。

            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;

就可以实现该效果

CSS3动画悬停显示文字特效.zip
07-04
通过定义动画的不同阶段，我们可以控制文字在不同时间点的状态，例如隐藏到显示的过程。以下是一个简单的例子： ```css @keyframes slideIn { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity:...
jquery+css3实现图片圆形旋转点击可显说明文字效果.zip
11-17
2. **CSS3边框半径（Border-radius）**：为了使图片呈圆形，可以使用`border-radius`属性，将其值设为图片宽度的一半，这将使得图片的四个角变为圆角，从而形成圆形效果。 3. **CSS3过渡（Transition）**：过渡可以...
如何将多余文本变成。。。。
qq_37169559的博客
11-07 296
<style> div{ width: 100px; height:30px; background: greenyellow; margin: 20px; color: red; } .b{ overflow: hi...
多出的文字自动变为点
37度2
12-17 602
<br />有时为使版面整齐而省略某段文字过多的内容，可使文字多出的变为点：<br />text-overflow:ellipsis;overflow:hidden;white-space: nowrap;
css 多余文字变成省略号
weixin_33831673的博客
05-09 272
overflow: hidden; //溢出隐藏 text-overflow: ellipsis; //省略号 white-space: nowrap; //不换行 上浮显示所有 ：hover{white-space：normal} // 默认值 转载于:https://www.cnblogs.com/C-dashazi/p/6831231.html...
前端让h5标签超过长度的字自动转换成“...”
a1085578081的博客
09-24 1520
在前端页面的开发上，有可能会遇到一个宽度固定的位置，让你单行显示一条信息，但是这条信息的字数是不确定的，字数多了会挤到下一行，这时候在标签的css上做下限制，就可以实现超过宽度就将后面的字变成“...” 效果如下 css: width:235px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; ...
多余的字数变成省略号
cxl4399的博客
11-10 363
$(function(){ var oUl=document.getElementById("suolue"); var str=oUl.innerHTML; oUl.innerHTML=str.substr(0,30)+"..."; });
如何用回收站隐藏文件终稿.pdf
02-25
- **删除“显示文件”文字**：用记事本打开文件夹内的Folder.htt文件，删除“显示文件”文字。这样当尝试打开该文件夹时，会弹出类似Windows系统目录的警告语句，并且没有“显示文件”选项。 这些技巧提供了一种...
css 文字两列显示溢出隐藏变...
07-28
对于CSS文字的两列显示，溢出隐藏并且在溢出时变为省略号，您可以使用以下的CSS属性和值来实现： ``` .text-container { display: -webkit-box; -webkit-line-clamp: 1; /* 控制显示的行数 */ -webkit-box-...
WPS文字隐藏文字添加拼音 制作语文考卷不用愁.docx
09-27
WPS文字隐藏文字添加拼音 制作语文考卷不用愁 在制作语文考卷时，WPS文字提供了隐藏文字和添加拼音的功能，以下是相关知识点的总结： 1. 隐藏文字 * 在作业与测试中，需要学生填空，有时没有标准答案，可以随意...
把一行文字内多余的文字变成...的css怎么写?
ysnowx的专栏
03-14 1332
美女 
文字过多，超出的文字变成...
qq_35484998的博客
01-27 5853
p { width: 100px; /*设置文本框大小*/ white-space: nowrap; /*设置内容不换行*/ text-overflow: ellipsis; /*设置文字超出文本框的内容显示成...*/ overflow: hidden; /*超出部分隐藏*/ } 神马都是
CSS实现多余文字用省略号代替
MT_su的博客
09-09 5734
  .txt{ background: gainsboro; width: 200px;     //设置文字显示宽度 overflow: hidden;  //溢出内容隐藏 white-space: nowrap;  //强制文本在一行内显示 text-overflow: ellipsis; //当对象内文本溢出时显示省略标记 } &lt;p class="txt"&gt;C...
element-UI table文字超出两行，隐藏多余文字，移入显示tips
cynl7的博客
03-23 1335
css样式 //写在scoped里面所以需要deep,app-container为el-table外部包裹div的classname .app-container /deep/.el-table .myNoteBox .cell { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } html代码 &
css 文字第二行多余文字隐藏后面小数点显示
wjtlk78475555的博客
04-22 3422
有时候只想要在第二行的时候隐藏，然后后面跟上小数点显示出来，就不需要用JS或者juqery之类的去写了，这个更简单粗暴。
怎么把文字设置为显示隐藏按钮
weixin_30760895的博客
04-27 274
几何画板是一款功能非常强大的教学课件，其功能是非常的多的，一些用户对一些不常用的功能不是很了解，比如我们经常会看到好多几何画板课件中的按钮做的很隐蔽，比如按一下文字“A”就会出现文字“B”，下面我们一起来看看怎么把几何画板文字设置为显示隐藏按钮？ 具体的操作步骤如下： 1.在文本框中输入B，选定B，“编辑”——“操作类按钮”——“隐藏/显示”，此时可以得到一个“隐藏说明”按钮。 选中文本B...
怎么把多余文字转化为省略号？
05-10 311
先看看最简单的，利用text-overflow:ellipsis实现单行文本溢出显示省略号效果 1 overflow: hidden; 2 text-overflow: ellipsis;//clip|ellipsis3white-space: nowrap; 效果如下： 所有主流浏览器都支持 text-overflow 属性。但这个属性仅适用于单行文本，多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值