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

最新推荐文章于 2024-05-07 14:55:18 发布

Jerry最胖

最新推荐文章于 2024-05-07 14:55:18 发布

阅读量1.2w

点赞数 3

分类专栏： css 文章标签： css html5

本文链接：https://blog.csdn.net/qq_27791709/article/details/78835781

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 属性的值。

Jerry最胖

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
关于td里面内容不换行的解决办法

PageAdmin新版采用了Html5的文档类型声明（即：），会发现只在table中增加强制换行样式style="word-break:break-all;"已经不管用了。解决办法：增加white-space和word-wrap（如果不用这个，英文或数字长字符串不会强制换行），完整的样式如下：.... 注意，td里面一定要加上宽度限制这样设置后在火狐和IE下td里面的内容都会在
复制链接

扫一扫