样式声明——溢出属性
创始人
2025-05-31 17:10:01

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

文章目录

  • 系列文章目录
    • 1.溢出
      • overflow:
      • overflow-x 和 overflow-y
    • 2.用途

1.溢出

指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条
仅适用于具有指定高度的块元素

overflow:

visible:	默认。溢出没有被剪裁。内容在元素框外渲染
hidden:		溢出被剪裁，其余内容将不可见
scroll:		溢出被剪裁，同时添加滚动条以查看其余内容
auto:		与 scroll 类似，但仅在必要时添加滚动条

overflow-x 和 overflow-y

属性规定是仅水平还是垂直地（或同时）更改内容的溢出overflow-x 指定如何处理内容的左/右边缘
overflow-y 指定如何处理内容的上/下边缘

2.用途

文本溢出隐藏,超出部分显示…或者截取，前提必须有宽度

  • 显示… text-overflow: ellipsis;
  • 截取 text-overflow: clip
  1. 单行文本：
CSS: {width: ___px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
};
  1. 多行文本：
CSS: {width: ___px;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;
}

使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端

1.-webkit-line-clamp 用来限制在一个块元素显示的文本的行数
为了实现该效果，它需要组合其他的WebKit属性
常见结合属性：
2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：用水量测系统-灌区用水精细化管理

下一篇：娇牛马的新饲料：领导喂的炼乳小馒头 娇牛马的新饲料：领导喂的炼乳小馒头

相关内容

热门资讯

4月广州消费品市场表现强劲 1-4月，随着消费品以旧换新等促消费政策持续发力和各类会展活动陆续开展，政策相关消费快速增长，升级类...
金价，又跌了！ 人民财讯5月31日电，5月30日，COMEX黄金期货收跌0.92%，报3313.1美元/盎司。 从高...
10万吨改性项目！巴斯夫、金发... 【DT新材料】获悉，6月3日，沪市主板新股海阳科技将启动申购，上市在即！ 资料显示，海阳科技前身为南...
湾财周报|大事记 比亚迪驳斥“... 一周大事记（5月26日-6月1日） 头条 比亚迪驳斥！ 长城“车圈恒大论”是行业警示还是危言耸听？...
通源石油跌1.96%，成交额1... 5月30日，通源石油跌1.96%，成交额1.03亿元，换手率4.40%，总市值23.54亿元。 异动...
中国邮储银行浙江分行2025校... 点这里 ↑ 老满说高考 作者 l 老满 生涯规划师l 升学顾问l 拆书家 这是 老满说高考公众号 的...
公募基金规模首次突破33万亿元... 每经记者：肖芮冬 每经编辑：叶峰 天赐良基日报第654期 一、今日基金新闻速览 1、华润元大基金贾...
湾财周报 大事记 比亚迪驳斥“... 一周大事记（5月26日-6月1日）头条比亚迪驳斥！长城“车圈恒大论”是行业警示还是危言耸听？近日，关...
EL表达式JSTL标签库 EL表达式     EL：Expression Language 表达式语言     ...
关于测试，我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语，但并没有使用过测试工具。偶然看到编程老师...
工信部、中汽协紧急发声！汽车“... 文/刘育英新一轮汽车价格战再起。近日，工信部、中汽协纷纷发声表示反对。工业和信息化部表示，将加大对汽...
3 ROS1通讯编程提高(1) 3 ROS1通讯编程提高3.1 使用VS Code编译ROS13.1.1 VS Code的安装和配置...
募资39亿，全亏光了，账上不到... 关于天然气，用户的感觉是价格一直在上涨，但很奇怪，不管怎么涨，天然气企业仍然亏，还亏得一塌糊涂。这是...
资阳房产评估公司 这是(tel-15828298733)整理的信息，希望能帮助到大家 在当今社会，随着经济的发展和城...
华桥汇利（中国）投资基金管理有... 今年第一季度，美国企业利润出现大幅下降，且面临着来自关税上升的持续压力，这一局面可能会在今年进一步加...
ESG 报告合规与鉴证：全球政... 在当下全球经济格局里，ESG（环境、社会和公司治理）已然成为衡量企业可持续发展能力的关键指标。随着全...
【Unity 手写PBR】Bu... 写在前面 前期积累： GAMES101作业7提高-实现微表面模型你需要了解的知识 【技...
与锤巨子生物的大嘴博士持股同一... 医美龙头巨子生物“成分争议”风波持续发酵。日前，美妆博主大嘴博士（香港大学化学博士郝宇）发文，质疑巨...
Linux之进程间通信 目录 进程间通信介绍 一、为什么要进行进程间通信？ 二、进程间通信目的 三、进程间通信...
从“造城”到“留客”，文旅局长... 你有没有刷到最近各地文旅局局长全体“尬舞”的视频？领导们放下架子开始跳魔性舞蹈，这场舞的背后啊，可不...
Hazel引擎学习（十一） 我自己维护引擎的github地址在这里，里面加了不少注释，有需要的可以看...
孩子的教育金，分享3个「有效」... 点击 “简七读财” ，发送消息“ 理财小工具 ”免费领取“40个赚钱工具资源包”晚上好，我是简七编...
iZotope RX 10(专... iZotope RX 10是一款专业的音频修复和增强软件，具有音频修复工具、音频增强工...
我的docker随笔40：cl... 本文介绍 clickhouse 数据库的容器化部署。 起因 某项目需生产环境数据库，因...
透视一周牛熊股：最牛股路桥信息... 过去一周（5月26日—5月30日）A股三大指数集体下跌。截至5月30日收盘，上证指数报3347.49...
基于matlab创建地面固定雷... 一、前言此示例演示如何创建和显示包含地面固定雷达、转弯飞机、等速飞机和移动地面车辆的多平台方案。二、...
暗夜发光,独自闪耀,盘点网页暗... 众所周知，网页的暗黑模式可以减少屏幕反射和蓝光辐射，减少眼睛的疲劳感&#...
C语言-程序环境和预处理（2） 文章目录预处理详解1.预定义符号2.#define2.1#define定义的标识符2.2#defin...
MySQL数据库知识整理 MySQL数据库知识整理 MySQL事务详解 事务四大特性ACID 原子性（Atomi...
Docker基础篇——最全讲解 文章目录一、CentOS安装docker二、启动帮助类命令三、镜像命令1.名词概念2.常用命令2.1...