图解CSS3核心技术与案例实践(第五章CSS3文本)
来源:互联网 发布:网络语吃草是什么意思 编辑:程序博客网 时间:2024/06/11 07:24
1.溢出文本属性text-overflow
①text-overflow:clip|ellipsis
clip:不显示省略标记(…),只是简单的裁切
ellipsis:文本溢出时显示省略标记,省略标记插入的位置是最后一个字符
②要实现文本溢出效果必须具备三个属性:
强制文本在一行显示(white-space:nowrap)
溢出内容隐藏(overflow:hidden)
文本容器宽度(width)
2.文本换行属性word-wrap
实现长单词与URL地址的自动换行
①word-wrap:normal|break-word
normal:默认值,浏览器只在半角空格或连字符的地方进行换行
break-word:将内容在边界内换行(不截断英文单词换行)
3.自动换行属性word-break
通过具体的属性设置,不仅可以让浏览器实现半角空格或者连字符后面的换行,而且可以让浏览器实现任意位置的换行
①word-break:normal | break-all | keep-all
narmal:默认值,中文到边界上的汉字换行,英文到整个单词换行
break-all:可以强行截断英文单词,达到词内换行效果
keep-all:不允许字断开,如果是中文,把前后标点符号内的一个汉字短语整个换行,英文单词整个换行;如果出现某个英文字符长度超出容器边界,后面的部分将撑破容器;如果边框为固定属性,则后边的部分无法显示
4.声明建立布局过程中如何处理元素的空白符white-space属性(没看)
5.文本换行技巧
阅读全文
0 0
- 图解CSS3核心技术与案例实践(第五章CSS3文本)
- 图解CSS3核心技术与案例实战(第二章 CSS3选择器)
- 图解CSS3核心技术与案例实战(第三章CSS3边框)
- 图解CSS3核心技术与案例实战(第七章CSS3盒模型)
- 图解CSS3核心技术与案例分析(第八章CSS3伸缩布局盒模型)
- 《图解CSS3:核心技术与案例实战》
- 图解css3核心技术与案例实战(第一章)
- css3文本与字体
- CSS3字体与文本效果
- [CSS3] 文本
- CSS3文本
- Html5与Css3文本、图、标记(三)
- 读《图解CSS3》有感——走进CSS3(一)
- CSS3属性教程与案例分享
- CSS3学习笔记之文本与字体
- CSS3(四)—— CSS3文本效果
- 图解CSS3 Flexbox属性(转)
- 图解CSS3 Flexbox属性
- java开发环境搭建(JDK+eclipse内含资源地址)
- mysql-共享锁与排他锁
- BUG解决:okhttp报getDefaultSSLSocketFactory错
- javascript中不可变的原始值和可变对象
- 第12周项目3-Dijkstra算法的验证
- 图解CSS3核心技术与案例实践(第五章CSS3文本)
- 防止sql注入
- Ubuntu14源码编译安装Xen4.6
- 微信内置浏览器缓存清理方法
- 数据处理模型
- ESlint-airbnb配置
- 对xine结构的了解
- remove mysql
- 让地址栏显示返回实际jsp的的实际位置