div+css中怎样实现文字自动换行？

html-css05

div+css中怎样实现文字自动换行？,第1张

div+css中实现文字自动换行代码如下：

1、CSS代码：#wrap{white-space:normalwidth:200px}。

2、DIV代码：<div >ddd1111111111111111111111111111111111</div>。

可以实现文字自动换行。

在Microsoft Excel软件单元格中，如果文本过长，则超出列宽以外的文本将被隐藏起来。

为了在保持列宽一定的情况下显示出单元格中的所有文本，可以设置文字自动换行。

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

问题描述:

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

解析:

默认的就是自动换行

语法：

white-space : normal | pre | nowrap

取值：

normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行

pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-pliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-pliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。

nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

1、普通设置： style{ width:400px overflow:hidden text-overflow:ellipsis display:-webkit-box / * autoprefixer:off * / -webkit-box-orient:vertical / * autoprefixer:on * / -webkit-line-clamp:4 } 效果如下：以上会导致英文和数字自动换行不对齐。 2、解决后 style{ width:400px word-break:break-all word-wrap:break-word overflow:hidden text-align:left//这是我在表格中使用时表头设置了居中，通用可不设置 text-overflow:ellipsis display:-webkit-box / * autoprefixer:off * / -webkit-box-orient:vertical / * autoprefixer:on * / -webkit-line-clamp:4 }