问题描述:
如何用css控制文本自动换行 ?
解析:
默认的就是自动换行
语法:
white-space : normal | pre | nowrap
取值:
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-pliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-pliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。
在标签中加入word-wrap: break-word即可自动换行。
例:
p{word-wrap: break-word
}
哈哈,这几楼的回答都不太正确,css可以自己完成图片的自动切换,不需要什么js辅助。人家楼主问的如何用css来实现,你搞的那个什么用js来实现,答非所问,还弄个专业回答,逗子终结者?css有个执行简单动画的写法,比如animation。
我给你个例子:
#head-pic,#head-pic2{
width:145pxheight:145pxposition:absolute
top:200px
left:68px
z-index:2
border-radius:100px
-webkit-border-radius:100px
-moz-border-radius:100px
border:3px solid #fff
}
/*为浏览器兼容设置*/
@keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
@-moz-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-moz-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic.jpg)opacity:1.0}
}
@-webkit-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-webkit-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
@-o-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-o-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
#head-pic{
animation:headpic-slider 20s linear infinite
-moz-animation:headpic-slider 20s linear infinite
-webkit-animation:headpic-slider 20s linear infinite
}
#head-pic2{
animation:headpic-slider2 20s linear infinite
-moz-animation:headpic-slider2 20s linear infinite
-webkit-animation:headpic-slider2 20s linear infinite
}