超出区域文字显示为省略号或者剪切效果——CSS的生僻操作
2024-10-15 10:06:00
每门语言总有那么一些不太常用,却又不可或缺的语法操作。下面说一下,在HTML文件中,如何设置用 “省略号” 和 “剪切” 代替大量文字的效果。
以下是HTML的主体代码:
首先,中文是默认行末自动换行的。而英文和数字,主流浏览器一般默认为空格处换行。上图,我们先编写2段字符。然后CSS代码见下图:
见上图,设置div的大小使其装不下字符,然后对字符设置不断行。这样文字会超出div显示,然后overflow:hidden;让超出部分隐藏不显示,
然后 text-overflow:ellipsis;或者 text-overflow:clip;分别设置隐藏部分用 省略号或剪切效果显示。
最新文章
- 使用Photoshop不改变图片尺寸,保存图片到30K以下的解决办法
- js 测试
- 清北学堂2017NOIP冬令营入学测试 P4744 A’s problem(a)
- UILabel UISwitch UISegmentedControl UIAlertView
- 【BZOJ】【1503】 【NOI2004】郁闷的出纳员
- List Comprehensions
- PS4破解
- Virtualizing WrapPanel VS toolkit:WrapPanel
- VMProtect修复导入表的插件
- Android NDK的C++11标准支持
- a标签屏蔽href跳转
- 【PL/SQL Developer】动态执行表不可访问,本会话的自动统计被禁止
- python 3.x 爬虫基础---http headers详解
- Angular4--提速--提升Angular项目的首页打开速度(包含微信登录优化)
- Unity热更新之C#反射动态获取类属性及方法
- MVC Web.Config 配置错误
- 学习node.js 第2篇 介绍node.js 安装
- 在属性property做一些简单的验证
- 阿里云配置ssh
- 交换机的默认网关(跨网段telnet)