td标签内的内容过长导致的问题的解决办法

问题描述：在开发过程中，td标签中的有一个cell格中的内容过长，导致td标签高度增加，从而导致整个页面内容的不协调：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfYAAAEdCAIAAABxCtKqAAAObElEQVR4nO3dwUEbSRQEUOIiIOIhGpIhGPZgLwIbsNQ9/Wt+672T13jFqEoqDSOwH94AOnh4eEgfQj8iA3ow8QN+R/YAwH7eJz73MgNn5wlyBlq4lYmHq3iCnIEWbmXi60i4NfWdgRZuZeLrSLg19Z2BFm5l4utIuDX1nYEWbmXi60i4NfWdgRZuZeLrSLg19Z2BFm5l4utIuDX1nYEWbmXi60i4NfWdgRZuZeLrSLg19Z2BFm5l4utIuDX1nYEWbmXi60i4NfWdgRZuZeLrSLg19Z2BFm5l4utIuDX1xalggImvI+HW1BenggEmvo6EW1NfnAoGmPg6Em5NfXEqGGDi60i4NfXFqWCAia8j4dbUF6eCASa+joRbU1+cCgaY+DoSbk19cSoYYOLrSLg19cWpYICJryPh1tQXp4IBJr6OhFtTX5wKBpj4OhJuTX1xKhhg4utIuDX1xalggImvI+HW1BenggEmvo6EW1NfnAoGmPg6Em5NfXEqGGDi60i4NfXFqWCAia8j4dbUF6eCASa+joRbU1+cCgaY+DoSbk19cSoYYOKLiLc7DcapYICJLyLe7jQYp4IBJr6IeLvTYJwKBpj4IuLtToNxKhhg4ouItzsNxqlggIkvIt7uNBinggEmvoh4u9NgnAoGmPgi4u1Og3EqGGDii4i3Ow3GqWCAiS8i3u40GKeCASa+iHi702CW/MeY+CLi7U6DWfIfY+KLiLc7DWbJf4yJLyLe7jSYJf8xJr6IeLvTYFaL/B/O6f3gsunsTbzd3XOD4YXqI13UFy6Hdc7j24Z4Tyg7B42ki3p78wwadelPgktVxhtdg05uTXVRX1xD/mMuD/TzJxhdg07SRe1JsFnyH3NZhI8JRgfqW6GIjtH9+NFglvzHXKZTgkuJtzsNZsl/jIkvIt7uNJgl/zEmvoh4u9NglvzHmPgi4u1Og1nyH2Pii4i3Ow1myX+MiS8i3u40mCX/MSa+iHi702CW/MeY+CLi7U6DWfIfY+KLiLc19cWpYIyJLyLe1tQXp4IxJr6IeFtTX5wKxpj4IuJtTX1xKhhj4ouItzX1xalgjIkvIt7W1BengjEmvoh4W1NfnArGmPgi4m1NfXEqGGPii4i3NfXFqWCMiS8i3tbUF6eCMSa+iHhbU1+cCsaY+CLibU19cSoYY+KLiLc19cWpYIyJLyLe1tSXJf9hJr6IeFtTX5b8h5n4IuJtTX1Z8h9m4ouItzX1Zcl/mIkvIt7W1Jcl/2Emvoh4W1NflvyHmfgi4m1NfVnyH2bii4i3NfVlyX+YiS8i3tbUlyX/YSa+iHhbU1+W/IeZ+CLibU19WfIfZuKLiLc19WXJf5iJLyLe1tSXJf9hJr6IeFtTX5b8h5n4IuJtTX1Z8h9m4ouItzX1Zcl/mIkvIt7W1Jcl/2Emvoh4W1NflvyHmfgi4m1NfVnyH2bii4i3NfVlyX+Yia8g2+40mCX/YSa+gmy702CW/IeZ+Aqy7U6DWfIfZuIryLY7DWbdVf4Ph3u/3ewd25hsu9Ng1kD+xw9llcOjM/HLyba7u20wunVT0smdxSULoawj2+4mG4xu3ZSjApx0niNp59KiENeR7SGiWzclnVx7Mhx2efwJcZ1TZRvduinZ0IKfHfkPuzxzhHiT6NZNSSfXktyy5D/s8pyPhBjduim33s1FAVJDg1nyH3ZZqy9DPNVQ9nU/93RXGgwS/ox/TDyHkG13GgwS/gwTX0G23WkwSPgzTHwF2XanwSDhzzDxFWTbnQaDhD/DxFeQbXcaDBL+DBNfQbbdaTBI+DNMfAXZdqfBIOHPMPEVZNudBoOEP8PEV5BtdxoMEv4ME19Btt1pMEj4M0x8Bdl2p8Eg4c8w8RVk250Gg4Q/w8RXkG13GgwS/gwTX0G23WkwSPgzTHwF2XanwSDhzzDxFWTbnQaDhD/DxFeQbXcaDBL+DBNfQbbdaTBI+DNMfAXZdqfBIOHPMPEVZNudBoOEP8PEV5BtdxoMEv4ME19Btt1pMEj4M0x8Bdl2p8Eg4c8w8RVk250Gg4Q/w8RXkG13GgwS/gwTX0G23WkwSPgzTHwF2XanwSDhzzDxFWTbnQaDhD/DxFeQbXcaDBL+DBNfQbbdaTBF8pNMfAXZdqfBFMlPMvEVZNudBlMkP8nEV5BtdxpMkfwkE19Btt1pMEXyk0x8Bdl2p8EUyU8y8RVk250GUyQ/ycRXkG13GkyR/CQTX0G23WkwRfKTTHwF2XanwRTJTzLxFWTbnQZTJD/JxFeQbXcaTJH8JBNfQbbdaTBF8pNMfAXZdqfBFMlPMvEVZNudBlMkP8nEV5BtdxpMkfwkE19Btt1pMEXyk0x8Bdl2p8EUyU8y8RVk250GU86Z/EMv7wedTW1Xgt3AOUsMD8cdSzd/g8vh9jruRrYPNvtku2fp5ivcyd1c5/JA6R5l9sl2z9LNV7iTu3lCkp90eYpmZ2JeNscfnPnYuJISUyQ/6TKOolxEsBtQYorkJ5n45QS7ASWmSH6SiV9OsBtQYorkJ5n45QS7ASWmSH6SiV9OsBtQYorkJ5n45QS7ASWmSH6SiV9OsBtQYorkJ5n45QS7ASWmSH6SiV9OsBtQYoTY55n45QS7ASVGiH2eiV9OsBtQYoTY55n45QS7ASVGiH2eiV9OsBtQYoTY55n45QS7ASVGiH2eiV9OsBtQYoTY55n45QS7ASVGiH2eiV9OsBtQYoTY55n45QS7ASVGiH2eiV9OsBtQYoTY55n45QS7ASVGiH2eiV9OsBtQYoTY55n45QS7ASVGiH2eiV9OsBtQYoTY55n45QTbnQZTJD/PxC8n2O40mCL5eSZ+OcF2p8EUyc8z8csJtjsNpkh+nolfTrDdaTBF8vNM/HKC7U6DKZKfZ+KXE2x3GkyR/DwTv5xgu9NgiuTnmfjlBNudBlMkP8/ELyfY7jSYIvl5Jn45wXanwRTJzzPxywm2Ow2mSH6eiV9OsN1pMEXy80z8coLtToMpkp9n4pcTbHcaTNky+Yd67584e893JdjuNHi4wMydRiDq918Vf+47IdjuFjUY3ZmwYOz35hK3QBcR7A+iOxOWzv7sRHSIy0NNoIv8M9jozoTVVDCpy3FuRuyHuDzNsoFGdyYsGDvX0FGE2A/xe2KyG/ewdZd737t7oMEIsR/iMq8CXUSw3WkwQuyHMPHLCbY7DUaI/RAmfjnBdqfBCLEfwsQvJ9juNBgh9kOY+OUE250GI8R+CBO/nGC702CE2A9h4pcTbHcajBD7IUz8coLtToMRYj+EiV9OsN1pMELshzDxywm2Ow1GiP0QJn45wXanwQixH8LELyfY7jQYIfZDmPjlBNudBiPEfggTv5ZUN6DECLEfwsSvJdUNKDFC7Icw8WtJdQNKjBD7IUz8WlLdgBIjxH4IE7+WVDegxAixH8LEryXVDSgxQuyHMPFrSXUDSowQ+yFM/FpS3YASI8R+CBO/llQ3oMQIsR/CxK8l1Q0oMULshzDxa0l1A0qMEPshTPxaUt2AEiPEfggTv5ZUN6DEejI/iolfS6obUGI9mR/FxK8l1Q0osZ7Mj2Li15LqBpRYT+ZHMfFrSXUDSqwn86OY+LWkugEl1pP5UUz8WlLdgBLryfwoJn4tqW5AifVkfhQTv5ZUN6DEejI/iolfS6obUGI9mR/FxK8l1Q0osZ7Mj2Li15LqBpRYT+ZHMfFrSXUDSqwn86OY+LWkugEl1pP5UUz8WlLdgBLryfwoJn4tqcIAT5yjfJp4AHbzPvG5V5ptSRUIMvFrSRUIMvEA2zLxANsy8QDbMvEA2zLxANsy8QDbMvEA2/o98fYdYD8mHmBbJh5gWyYeYFsmnvv18nT139X39HLTLb8+P155w4/Pr4vuHbyZePjg9flx2ea+PJlz6pl4eLdu4le+eMD3TDy8O3aI/3m15sarPwWuuHT1Kx9Xorow8fDu9fnx4fHx8aBden1+/H7Ff/xgzL+uJr0+P377cVeizuf3vL+Z+CKHnSTGz6F+HcDPN/7pIL9fsw8njvGFeH1+fHh4ernm3l15ax/u9+cJPO3EDz6iXIk6IxNfbId38z6OwA+f8PPhvDx9s/Kvz4/vv/36fNTp87APBf2a+csxX/+q+vDxJvpN/A1n8Q2vRN2ZE0z8F1/4/fnYj5+xHmend/Nenm4J/Pfp8QF/aKk/Yvxz5gdu7fPEf/ivZhP//sr+51Oz2ZWoO3OCif/zBO+6qep61W+nd/Nun/h//unTTfzb26/7OXhMn0fujwftORfw5enh8fn5i6s1Xx5qwy9T7kxs4m/4oveLB0nfq35f3+/R+5I9h7pp4q8Z7/zAr3gN/v8OvVf//82fcwH/PHn6+ShN/Nmd4iz+l5/eqf/98eAZ61HWLchb+RPshon/9kr829vHZk/wsr3o7OHDuwy/L3ic4L5+6eXp4enl5/dcv3+QdbgSdWeyE3/Tau9x1e+HBWn3bt61E3/9m6iTV76PcPjE/671q/ebzjj0fz1qbjmLb3El6s7kJ/7q1d7jS8LVZ/GV51BXTfyt3yQzceH7EIcV9P+J8L+/ND3VA/fbS/Ffn3w1vBJ1Z/ITP3oWb+Lf0udQ/574H6/PfP+/tGhyT198G8PnE4fvfqvPlag7k5/4ibP4jlf9dno374uJ/zjQP+z7hz/2qcfPF2o+3sB3v+ZQX32j2t8vun+fXjW6EnVv8hM/eBbf9arfDu/mfVXbr/D/+rmhP3z42OX4vv0R2I9XMb77NUf64uz87csqn17aXom6Nw////00kW+nGT6L73vVb+938678aYWuP9QA7TSa+E8f6HLVb92/OHHGcygLDyeTn/hbZu9UZ6wAZ5ef+GvO4s94xgpwetmJB6hz9WXTHaXDh2rp5xzV0o+4gAdn8e/Cjz7KpR9xUOTycE8/6ZKyHQAsYuAAtvUfX9AIu2oUysMAAAAASUVORK5CYII=" alt="" />

当td标签高度增加，而表格所在的div高度又固定的时候，会导致最后一行的内容丢失。

解决方法：

给td标签加style属性：

style="white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;overflow:hidden;" width="200"

解释：

使用text-overflow:ellipsis对溢出文本显示省略号有两个好处，一是不用通过程序限定字数；二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。

通常的做法是这样的：
1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
其中，overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；-o-text-overflow: ellipsis针对Opera；而宽度的设定主要是针对IE6；

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWQAAABJCAIAAACFPMsrAAAElElEQVR4nO3bu7mjMBCGYTVDTB/KN6QHZdvCUgJdUAQl0IpjbyBAtxEejq8Hf2/Ac1Y2MGDze5C95goACubdBQD4HQgLACqEBQAVwgKACmEBQIWwAKCyhcXct6bt5+Wvim68Xq9jZ5ZnBn6dbnxx9QBeZg2LsYviIIzkoXC9Xud57Nv8IcICOLvoNmTuW9N141htLaIsmPvWmLbraj2IEDIAfrXanEXaV0SNw9y3QgtBZwGc3RIWay+xxkN28cdhMfedKYKBsADOLnQWay+xzl7s3V4Uc5yEBXB2ZVioV9351oRZC+B0xLCoNRdb5zB2xT0K6QCcm3AbMo5lk5HeZvgwSYIl/IPQAE4pD4uua9u+3w8LoQcJX5TQZADnlIWFv9B3b0Pm9SdZYc7Ch0iyFnOdwMkIP/eW5jrzH1pIcxvxTUrXjaQFcCr8RzIAKoQFABXCAoAKYQFAhbAAoEJYAFAhLACoEBYAVAgLACqEBQAVwgKACmEBQIWwAKCyhMXff38ulwtLlixZlsskLC4AUCF0FgBQorMAoEJnAUCFzgKACp0FABU6CwAqdBYAVOgsAKjQWQBQobMAoEJnAUDlbZ3F5Bpj7FB5dLDGNG566T4/yOQaY4xY62DD4GeeJbF45RG9/TU6WvxXeWdnkb5LMpOzD78Mbu3zw4i15pfWp54lRfG1wfe/Rvriv8qhzsIn7PZZNtgQt/7v+NHtyfHTQkobO9wOi3Wr6crFNredx5+zZUV+1A6hivRQbrwXBmtMY21TbFRz7JNrjGmaZjnw6MlynVGte4OvPUvyOflx8bVBae/7xa+DvtUawlusVveDik9eyPM72Flkn2TLPyfXxJddOKf+EvFPsW6KH73VboZV0+1L2wwPRn8Pw1CMhVd8cMlLrAkLv2v/pMk14TiOHftgTeOmcCblOuNaL/XB156l0l3F1wbLvYvFi4Px2yo5IU8p/pvDQvH8wa4fk3YIWZEkSHRS8y45Od/bBRc+IKKcD5djtqFym0ZYPRnPLoMf3+oLVeiPfX1s+9xcw0KsM9tYbfBlZ0l8je4svjZY7F0sXj4i8YQ8sfivcnTOYul7/T1E/r73DodFZUfKy0C+bY8+5JMnpJ35QU8Ii1qd2cZqg+89S3cWXxss9i4WLx9ROro3pfOY4r/K4W9DJuesbdx0GVwTWvHkjRa34vVXIfT0lf008UdL3GBn2xRDJ+xoafvj8bI/1d6GlBfj4WPPw0KuM99aZfC1Z0m7urL42mC5d7H42mA8dbQz/fuA4uObwG9w/NuQ7dSm94x7TV4x9WeMMcba+u2A70JdPgMlbzPeqEnmRIxZ5yTDlNl6G5Wkg3aC0wjrq449zNYtDXZeS1GndKCX9C376rNUUBevPaLq3qXipcHJ2XBC9l/Ru4tPgukb8AvOX+Z8zfBDj+hJ3yXLu7rVeZ0Nv+DEeWw91dkC9TPQWQBQobMAoEJnAUCFzgKACp0FABU6CwAqdBYAVOgsAKjQWQBQobMAoEJnAUCFzgKASt5Z+LxgyZIly2yZhAUA7CMsAKgQFgBUCAsAKoQFAJX/9ifSJAO9lCwAAAAASUVORK5CYII=" alt="" />

aaarticlea/png;base64,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" alt="" />