关于td里面内容不换行的解决办法
2017-12-18 18:25
591 查看
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 中新增的。
解决办法:增加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 属性的值。 |
相关文章推荐
- 关于table固定宽高以及td内容过长换行的解决办法
- 关于textarea提交的内容无法换行的解决办法
- html,css------td中内容不换行的解决办法、、、、
- td中内容不换行的解决办法
- 关于textarea提交的内容无法换行的解决办法
- IE6,IE7下面td里面内容为空格时设置边框样式不对解决办法
- 关于获取DIV内部内容报错的原因分析及解决办法
- 关于获取DIV内部内容报错的原因分析及解决办法
- 关于使用summernote编辑器提示内容无法汉化临时解决办法
- 关于CSS控制TD换行与否的问题解决
- 老版本IE下td没有内容为空时不显示边框的解决办法
- 控制td里面的内容不换行
- 添加Ipanel 中间件中2D效果时,里面动态创建的内容不显示的解决办法
- 关于flex里面mousedown 和click事件冲突问题的解决办法
- 关于table表格 td里内容较多换行的处理方法
- QQ里面打开H5页面,某些数字会默认变为a标签,字体变蓝,文字换行的解决办法
- duv中内容不换行的解决办法
- 关于wamp里面的phpmyadmin打不开的解决办法
- 关于flex里面mousedown 和click事件冲突问题的解决办法
- 关于 unity 里面 的UnityEdit con,t find 的解决办法(个人思路 勿喷)