CSS:word-wrap/overflow/transition
一 自动换行:一个div有固定宽高,如果其内容很长,必须两行以上才能显示完整的时候,有两种情况要留意
1 默认如果其内容都是中文,那么内容是可以自适应,而不会溢出div
2 如果内容除了中文之外,还有英文,数字等字符,那么就必须用word-wrap或word-break去控制英文和数字自动换行了
---http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html
二 连同文字一起隐藏:如果对一个div用了transition动画效果,那在动画渐变过程中,如果想把其内容也有动画一块隐藏或显示出来,就要给div加一个overflow:hidden;
如
#pagesDiv {
font-size:50px;
word-break:break-all;
overflow-y: hidden;
height: 0px;
opacity: 0.8;
visibility: hidden;
background-color: rgb(206, 86, 216);
}
动画效果的CSS类-pageActiveAnimate
#pagesDiv > .pageActiveAnimate {
-webkit-transition: all 1s linear;
height: 300px;
visibility: visible;
}
三 CSS动画:transition/transform/animation
http://segmentfault.com/q/1010000000148307
四 meta标签:meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ===>><meta http-equiv="content-Type" content="text/html;charset=utf-8">
http://kinglyhum.iteye.com/blog/827807
CSS:word-wrap/overflow/transition的更多相关文章
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- 【CSS学习】--- overflow属性
一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <met ...
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- css & auto height & overflow: hidden;
css & auto height & overflow: hidden; {overflow: hidden; height: 100%;} is the panacea! {溢出: ...
- CSS学习笔记:transition
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. 1.transit ...
- CSS中的overflow属性
导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动
原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...
随机推荐
- 大华NVR设备接分别入宇视摄像机Onvif和RTSP主子码流的方案说明
需求提要 1.各个内网现场有多种网络摄像机IPC和网络硬盘录像机NVR设备: 2.需要将这些设备统一接入到云端中心平台,进行统一的视频直播和录像回放管理: 3.由于目前IPC设备都属于高清设备,主码流 ...
- python中TCP和UDP区别
TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存&接收缓存).面向字节流.使用TCP的应用:Web浏览 ...
- twig 截取字符串
<p>{{content|slice(0,100)}}</p> slice()截取content变量值,从0到100
- RZ11 系统配置参数
SAP系统配置参数详解[转] SAP 系统参数设置 path: /usr/sap/PRD/SYS/profile profile: PRD_DVEBMGS00_sapapp 如果您想查看所有的参数及当 ...
- 在C语言中使用syslog打印日志到日志文件
参见 <unix 环境高级编程>第13 章 精灵进程 Syslog为每个事件赋予几个不同的优先级: LOG_EMERG——紧急情况 LOG_ALERT——应该被立即改正的问题,如系统数据库 ...
- spark0.9.0安装
利用周末的时间安装学习了下最近很火的Spark0.9.0(江湖传言,要革hadoop命,O(∩_∩)O),并体验了该框架下的机器学习包MLlib(spark解决的一个重点就是高效的运行迭代算法),下面 ...
- 【Prometheus】第二篇---基本查询语法
这几天忙着开发别的项目,今天抽空写一下Prometheus的查询语法 1,查看指标 直接输入指标名字就行了,grafana会自动补全 2,查看某个指标的使用率,比如cpu使用率 用到rate函数,ra ...
- Python基础(4)_字典、集合、bool值
三.字典 定义:{key1:value1,key2:value2},key-value结构,key必须是不可变类型,或者可hash 基本形式:key:value特性: 1.可存放多个值 2.可修改指定 ...
- 声明:关于该博客部分Java等方向知识参考来源的说明
[声明] 该博客部分代码是通过学习黑马程序员(传智播客)视频后,参考毕向东.张孝祥.杨中科等老师的公开课视频中讲解的代码,再结合自己的理解,自己手敲上去的,一方面加深自己的理解和方便以后自己用到的时候 ...
- stm32非操作系统开发和带uCos的开发的区别,及一些解析
从文件角度来看core_cm4.h和stm32f4xx.h分别从内核寄存器和外设寄存器来定义其地址和结构体,是用c语言访问硬件必须的文件,所以这两个文件不论是否带操作系统,都是必须包含进工程的. re ...