表格自动换行:<table style="word-break:break-allword-wrap:break-all">
一般字母的话会被浏览器默认是一个字符串或者说一个单词，所以不会自动换行。
需要设置，让表格内容自动换行：
1.在中设置样式style为word-wrap:break-wordword-break:break-all（一般情况只需要设置word-break:break-all即可，但是有时候需要加word-wrap:break-word ）
2.把表格的sytle的table-layout：fixed，就是表格固定宽度，就是表格既要自适应他外面的容器，也不要撑出去，然后设置td的word-wrap：break-word；换行
注意：IE和firefox是有很大区别的！
1. (IE浏览器)使用 table-layout:fixed强制table的宽度,多余内容隐藏
<table style="table-layout:fixed" width="200">
2.(IE浏览器)使用 table-layout:fixed强制table的宽度,内层td,th采用word-break : break-all或者word-wrap : break-word 换行
<table width="200" style="table-layout:fixed">
<tr>
<td width="25%" style="word-break : break-all ">abcdefghigklmnopqrstuvwxyz 1234567890
3.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
4.(Firefox浏览器)使用 table-layout:fixed强制table的宽度,内层td,th采用word-break : break-all或者word-wrap : break-word 换行，使用overflow:hidden隐藏超出内容，这里overflow:auto无法起作用
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all overflow:hidden ">abcdefghigklmnopqrstuvwxyz1234567890</td>
HTML里面加了一个样式属性：word-break:break-all，可以实现表格的自动换行，具体参考代码如下：
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8"
/>
<title>table内的td内容不换行</title>
<style
type="text/css">
<!--
body{
font-size:12px}
.breakLine{word-break:
break-all}
-->
</style>
</head>
<body>
<table
width="400">
<tr>
<td
width="90"
height="30">处理人工号：</td>
<td
width="410"
class="breakLine">001156,001157,001145,001149,001178,001123,001140,001167,001168,001134,001135</td>
</tr>
</table>
</body>
</html>
word-break属性简单介绍如下：
语法：word-break
:
normal
|
break-all
|
keep-all
取值：
normal
:
默认值。允许在词间换行
break-all
:
该行为与亚洲语言的
normal
相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all
:
与所有非亚洲语言的
normal
相同。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）