No.12 css添加文段省略号效果

最新推荐文章于 2024-07-18 14:29:38 发布
最新推荐文章于 2024-07-18 14:29:38 发布
阅读量90 收藏
点赞数
分类专栏： 包装好的小效果 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzh131464/article/details/112028236
版权

在html中，为一个容器设置宽高后，容器内的内容如果过多，那么内容就会溢出容器；或者，有时候我们不希望容器占据那么大的位置，又想让别人知道容器的内容没有结束，那么就可以通过修改css来达成这个效果，解决问题。

格式语法：     css选择器 {width:值;
                           white-space:nowrap;
                             overflow:hidden;
                               text-overflow:ellipsis;}
容器必须要有一个固定的宽。

在这里插入图片描述

在这里插入图片描述

步骤图解：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

不太努力的菜鸟鹿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3线性圆形Loading加载动画特效
06-11
这是一款简单的CSS3线性圆形Loading加载动画特效，线性圆形转动和Loading文字省略号动画效果。
css中文对照手册.pdf
11-26
- `text-overflow`处理文本溢出，可以显示省略号。 - `text-align`设定文本的对齐方式（左对齐、居中、右对齐等）。 - `text-transform`用于改变文本的大小写。 - `text-decoration`添加文本装饰，如下划线、...
css省略号效果
weixin_34148340的博客
12-22 63
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>    <title>New Document </title>    <style>        .ctl        {            table-layout
CSS段落省略号 CSS样式截取字符串过长用省略号表示
Pete很皮
01-10 3420
CSS段落省略号 CSS样式截取字符串过长用省略号表示.test{width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
Css实现...省略号的效果
weixin_50643343的博客
01-08 5291
介绍：我们无论写练习或者写项目的时候，像用户名字过长或者文本信息过长需要用到省略号的效果，特此总结一下用法。是叭，我们给div加上overflow：hidden会隐藏掉，但是不太美观就需要用到省略号。还是先写基础代码，我们这次的div高度要大一些。本文分为单行省略号的实现和多行省略号的实现。
CSS3 实现未读消息小红点
Wonder233的学习博客
06-07 1万+
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .red-point{
CSS3其他新增文本样式.pdf
07-10
2. `ellipsis`：这个值会在文本溢出时显示省略号（...），通常是在最后一个可见字符后添加，暗示有更多内容被隐藏。 然而，仅仅设置`text-overflow`还不足以实现省略号的效果。为了使文本在一行内显示且超出部分...
css3之未读消息小红点
idwtwt的专栏
10-30 1633
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .red-point{ position: r...
Css实现省略号...及悬浮层显示全部内容的方法：
热门推荐
SunPeng的博客
01-13 3万+
1、单行文本省略： overflow: hidden;//溢出隐藏 white-space: nowrap;//禁止换行 text-overflow: ellipsis;//... 2、多行文本省略： display:-moz-box;//火狐 display: -webkit-box;//谷歌 -webkit-box-orient: vertical; -webkit-line-clamp: 3;//显示几行 overflow: hidden; 注： 英文自动换行： word-wrap:break-
使用css实现省略号加载动画
weixin_46353030的博客
02-24 1949
环境 win10 vscode vue2.x 代码 <div class="dot"> 动态省略号 <span class="dot-ani"></span> </div> <style> .dot-ani { display: inline-block; height: 12px; line-height: 12px; overflow: hidden; } .dot-ani
css 省略号动画
qq_45457134的博客
11-24 1110
<div class="text">加载中，请稍后<span class="dot">...</span></div> <style> .dot { font-family: simsun; /*固定字体避免设置的宽度无效*/ animation: dot 3s infinite step-start; display: inline-block; width: 1.5em; vertical-align:
Css长段落文字隐藏显示省略号
AWDSDF的博客
09-07 363
Css长段落文字隐藏显示省略号
css段落结尾的省略号
weixin_34248023的博客
01-31 867
2019独角兽企业重金招聘Python工程师标准>>> ...
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1339
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 742
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 593
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
拖拽上传（预览图片）
最新发布
喵喵的博客
07-18 392
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
Html_Css问答集(11)
白话魔法师
07-16 850
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 762
介绍css和xpath，设置相对定位的基础使用
8.css如何实现省略号
05-16
可以使用 CSS 中的 `text-overflow` 属性来实现省略号的效果。具体实现步骤如下： 1. 设置元素的宽度和高度，以限制文本显示的区域。 2. 使用 `white-space: nowrap` 属性来防止文本换行。 3. 使用 `overflow: ...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值