问题描述:
如何用css控制文本自动换行 ?
解析:
默认的就是自动换行
语法:
white-space : normal | pre | nowrap
取值:
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-pliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-pliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:。
<div style="position: relativewidth: 300pxheight: 80pxborder: 1px solid blue">
<strong style="position: absoluteright: 0top: 0">获取更多</strong>
</div>
3、浏览器运行index.html页面,此时“获取更多”的链接文字移动到条形栏的中间位置了。
可以使用letter-spacing:*px
来控制文字间距,*px是指间距像素
这个不仅可以用在li里,其它需要文字排版的地方都可以使用
举个例子:
.list
li
{width:200px
text-align:center
height:22px
line-height:22px
letter-spacing:5px
overflow:hidden
clear:both}
说明.list
li
{li宽度200px
文字居中
li高度22px
行高22px
字间距5px
超出部份隐藏
清除}