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

html-css022

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

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

问题描述:

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

超出部份隐藏

清除}