CSS3-文本模型
来源:互联网 发布:只有粤语的电影软件 编辑:程序博客网 时间:2024/06/17 12:19
在文本中常用的几个模型:
text-overflow
- clip 修剪文本。
- ellipsis 显示省略符号来代表被修剪的文本。
- string 使用给定的字符串来代表被修剪的文本。
overflow
- visible 默认值。内容不会被修剪,会呈现在元素框之外。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
- inherit 规定应该从父元素继承 overflow 属性的值。
text-shadow
语法: text-shadow: x轴位移(必须) y轴位移(必须) 模糊度(可选) color(可选);
word-break
- normal 默认规则
- break-all 允许在单词内换行
- keep-all 只能在半角空格或者连字符出换行
word-wrap
- normal 只在允许的断字点换行(默认)
- break-word 在长单词或者url内部进行换行
word-break中的break-all和word-wrap中break-word的区别是break-all的处理方式是如果当前单词超过边界就会开始换行。而break-word是如果当前超过边界行的单词超过两个就会把超过的单词换到下一行,如果当前行超过边界并且当前行的单词只有一个的话,当前单词才会被分离换行。
看例子:
这是word-break中的break-all的效果:
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> div{width:100px;border:1px solid #13E144;margin:100px auto;word-break:break-all;}</style></head><body><div>FireLang dddddddddddddddddddddddd</div></body></html>
这是word-wrap中break-word的效果:
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> div{width:100px;border:1px solid #13E144;margin:100px auto;word-wrap:break-word;}</style></head><body><div>FireLang dddddddddddddddddddddddd</div></body></html>
超出边框区域以省略号来表示:
在做网站的时候,当我们从后台数据库中取出数据放到某个盒子里面的时候,常常会发生内容超过盒子,从而影响我们网站整体的布局。下面给出一个很好的解决办法:
出现问题时:
解决之后:
个人感觉nice,在我以前解决这个问题的时候我都一直用的是后台处理,通过替换字符串处理,兼容性不好。前台改后台也得改。
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> .box{width:57px;height:20px;border:1px solid #3DE124;margin:100px auto;white-space:nowrap; text-overflow:ellipsis;overflow:hidden;}//其中overflow和text-overflow必须同时结合使用才能有效果。</style></head><body><div class="box">FireLang---Marvel__Dead</div></body></html>
white-space
- nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
<br>
标签为止。
0 0
- CSS3-文本模型
- [CSS3] 文本
- CSS3文本
- CSS3窍门:隐藏文本
- CSS3 (四) 文本效果
- css3文本效果
- css3文本属性
- CSS3文本溢出
- Css3文本新属性
- CSS3 文本特效
- CSS3 新增文本属性
- CSS3文本和字体
- css3文本属性
- CSS3文本效果 、字体
- CSS3-FOUR-文本
- css3文本效果
- CSS3文本溢出
- CSS/CSS3 文本
- poj 3264 Balanced Lineup (线段树模板题)
- mysql 下载-安装-打开
- 在谷歌地球中找到泰坦尼克号
- Lightoj - 1017 - Brush (III) 详解(经典线性DP)
- HDU 4609 FFT+各种分类讨论
- CSS3-文本模型
- -
- BZOJ 2194 FFT
- 深入理解ListView(2) — 一天一点源码
- MySQL安装+Navicat11注册机破解
- COGS 2479 奇怪的姿势卡♂过去 (bitset+折半)
- CentOS 7.x设置自定义开机启动,添加自定义系统服务
- Cuda 学习教程一:GPU并行计算介绍
- ubuntu16.04 lamp webserver 服务器搭建