一 自动换行:一个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

http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms%E5%92%8Canimation%E4%BD%BF%E7%94%A8%E7%AE%80%E4%BB%8B%E4%B8%8E%E5%BA%94%E7%94%A8%E5%B1%95%E7%A4%BA/

四 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的更多相关文章

  1. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  2. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

  3. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  4. CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

    常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <met ...

  5. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  6. css & auto height & overflow: hidden;

    css & auto height & overflow: hidden; {overflow: hidden; height: 100%;} is the panacea! {溢出: ...

  7. CSS学习笔记:transition

    CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. 1.transit ...

  8. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  9. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

随机推荐

  1. OKR与KPI管理的区别与联系

    OKR是一种新兴的管理体系,最近几年被引进中国.由于在IT.互联网.金融.游戏等知识密集型企业中有着显著的效果,得到中国企业的认可. OKR是英文Objectives & Key Result ...

  2. FineUIPro中如何支持多语言(全局资源文件和本地资源文件)

    一个客户在邮件中问到了FineUIPro的多语言实现问题,其实 FineUIPro 并没有对此做特殊处理,因此直接使用 ASP.NET 原生支持的资源文件就能实现. 下面我们就以FineUIPro的空 ...

  3. 【BZOJ3779】重组病毒 LCT+DFS序

    [BZOJ3779]重组病毒 Description 黑客们通过对已有的病毒反编译,将许多不同的病毒重组,并重新编译出了新型的重组病毒.这种病毒的繁殖和变异能力极强.为了阻止这种病毒传播,某安全机构策 ...

  4. 九度OJ 1261:寻找峰值点 (基础题)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:500 解决:37 题目描述: 给定一个整数序列,该整数序列存在着这几种可能:先递增后递减.先递减后递增.全递减.全递增. 请找出那个最大值的 ...

  5. Netty环境搭建 (源码死磕2)

    [正文]netty源码  死磕2: 环境搭建 本小节目录 1. Netty为什么火得屌炸天? 1.1. Netty是什么? 1.2. Netty火到什么程度呢? 1.3. Netty为什么这么火? 2 ...

  6. Unable to determine IP address from host name

  7. JS表单提交

    测试一: function submit(){var form1=document.getElementById("form1")form1.action="/manag ...

  8. 我的Android进阶之旅------>android:drawableLeft的用法

    有时候想在EditText左边放一个图片,如图所示: 就可以在xml布局文件中的EditText定义代码中,添加入下面的代码,即可实现: android:drawableLeft="@dra ...

  9. VC2010编译时提示:转换到 COFF 期间失败: 文件无效或损坏

    有时候新安装好VS2010后编译时就提示上述错误,罗列一下从网上查找到的几种解决方案: 方案1: 点击“项目”-->“属性”--> “清单工具”, 然后选择"输入和输出’--&g ...

  10. img标签中alt属性与title属性

    alt属性 1.alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户.当图片不显示的时候,图片的替换文字.2.alt属性值得长度必须少于100个英 ...