HTML如何实现表格的自动换行,Opencart手机端表格不自动换行解决方法

Opencart so-matrix主题有集成移动端模板so-mobile,使用的时候发现移动端的产品详情页使用模板时,表格内的内容多的时候无法完全显示,即使把表格的格式全部去掉也不行。原因是表格内的内容不会自动换行,当内容超过一行时就无法正常显示。解决方法如下:

给table标签定义一下格式:

<table style=”word-break:break-all; word-wrap:break-all;”>

有几种语法可选:word-break : normal | break-all | keep-all| break-word,经过调试,我使用的是break-word。

normal :  默认值。允许在词间换行

break-all :  该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的 normal 相同。

html表格自动换行

扩展:word-wrap、white-space和word break的区别

1、word-wrap:break-word;

内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height、width或display:block或position:absolute。

2、word-break:break-all;

用于处理单词折断。(注意与第一个属性的对比)

3、white-space:nowrap;

用于处理元素内的空白,只在一行内显示。

4、overflow:hidden;

超出边界的部分隐藏。

5、text-overflow:ellipsis;

超出部分显示省略号。

 

来源:文章部分内容来自网络,由智能家居指南网整理发布,侵删!

发表评论