如何用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 对象。

1.可以通过XHTML标准的换行<br />

2.或者用<td><p><input......></p><p><label>ABCDEF</label></p></td>

加上段落标记不仅能达到换行效果,还能使2行间有一定间距

使用一段css代码:”word-wrap: break-wordword-break: break-alloverflow: hidden“。

实例演示如下:

1、设计两个容器,放入一些文字,代码如下:

此时的页面展示如下:(均为换行)

2、修改两个容器的样式,给第一个容器加上了关键代码如下:

此时的页面展示(第一个已经换行):

扩展资料:

css详解:

一、word-wrap: normal|break-word(word-wrap 属性允许长单词或 URL 地址换行到下一行)。

1、normal ,只在允许的断字点换行(浏览器保持默认处理,默认值)。

2、break-word, 在长单词或 URL 地址内部进行换行。

二、word-break: normal|break-all|keep-all(通过使用 word-break 属性,可以让浏览器实现在任意位置的换行)。

1、normal 使用浏览器默认的换行规则。(默认值)

2、break-all 允许在单词内换行。

3、keep-all 只能在半角空格或连字符处换行。