Bootstrap

关于td里面内容不换行的解决办法

PageAdmin新版采用了Html5的文档类型声明(即:<!DOCTYPE html>),会发现只在table中增加强制换行样式style="word-break:break-all;"已经不管用了。

解决办法:增加white-space和word-wrap(如果不用这个,英文或数字长字符串不会强制换行),完整的样式如下:

<table ..  style="word-wrap:break-word;word-break:break-all;white-space:normal;">
....
<td style="width:150px;overflow:hidden">
注意,td里面一定要加上宽度限制

这样设置后在火狐和IE下td里面的内容都会在超过固定宽度后强制换行。


word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。

它们的区别就在于:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

定义和用法

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值:normal
继承性:yes
版本:CSS1
JavaScript 语法:object.style.whiteSpace="pre"

可能的值

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

;