如何用css控制文本自动换行 ?

html-css012

如何用css控制文本自动换行 ?,第1张

分类: 电脑/网络 >>互联网

问题描述:

如何用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

}