不让TD中的文本撑开报表

我经常会遇到这样的问题：在设计好宽度的表格中，因为有些文本信息过长，而把表格撑开（弄的面目全非）！很让人头疼。其实解决这个问题很简单，只要在<td>的样式中加入word-break: break-all（强制换行），就会使那些不听话的文本自动回行。是我刚刚学到的，一起分享~~~

 

一起看看吧：

 

使用word-break之前： 

   <table width="300" border="1">
     <tr>
      <td width="100px">测试内容：</td>
      <td width="200px">asjdhfajshdflkajfdhajsdhfjashfieyruqeqyuiroqwytxcbvmbzxmzmvb</td>
     </tr>
    </table> 

 

 

使用word-break之后：

   <table width="300" border="1">
     <tr>
      <td width="100px">测试内容：</td>
      <td width="200px" style="word-break:break-all">asjdhfajshdflkajfdhajsdhfjasxmzmvb</td>
     </tr>
    </table> 

试试看吧，结果孑然不同：）

 

 

-------------CSS隐藏一行中过长字符串（即将超长文本强制显示在一行）/长文本自动换行--------

在web开发过程中，有时会出现一行显示信息过长，这样对用户的刻度性很差，所以可以考虑，当这一行超过容器允许宽度时，只显示一定长度，后面加上省略号，这样的话既可以将长文本显示在容器允许的宽度范围内，同时又能提示用户这个信息（长文本）没有显示完全。

具体的实现代码如下：

 

<td style="width:20px; text-overflow:ellipsis; white-space:nowrap;overflow:hidden;">testtesetetstestestestsetsetsetsetstsetsetstsetstsetsets
<td />

 

 

其中：width:20px-- 限定元素的长度，

           text-overflow:ellipsis ：当前元素内长文本溢出时显示省略号(注意，这一属性必需和一下两个属性同时使用，否则效果不明确)，

           white-space:nowrap：强制文本在一行内显示（有些元素在出现空格时会自动换行，这里通过改元素可以让问本在一行内强制显示），

           overflow:hidden：将溢出文本隐藏（否则会在一行内强制显示并超出容器宽度）。

至于将超长文本自动断词并换行，可以看该blog中的另一篇相关文章。

注：text-overflow:ellipsis不能在firefox中实现。

附：

text-overflow:clip | ellipsis

clip：不显示省略标记(...)，而是简单的裁切

ellipsis：当对象向内文本溢出时显示省略标记(...)

 

长文本自动换行

只需要在style中加入word-wrap:break-word即可实现浏览器中长文本自动更新

 

 

 

========在浏览器中显示TXT 文本中的换行（html/txt）=======

记事本，word等以回车换行。html以<br/>或<div><p>等会形成一行。如何统一txt与 html，就是在普通txt的开头加一个pre标签。这样，作为txt，它仍能在文本编辑器中，方便地阅读、编辑、搜索。同时，又能在浏览器下直接保持格 式显示。 
pre 标签，是以txt为html的关键。它让txt中的tab缩进、回车换行仍能保留在html中。
但直接使用<pre>会导致过长的文字撑宽浏览器，要想自动换行，需要如下写法，以兼顾不同浏览器：
<pre style=”word-wrap: break-word; white-space: pre-wrap; white-space: -moz-pre-wrap” >

如： <td height="84" align="left" valign="top" class="t2"><pre style="word-wrap: break-word; white-space: pre-wrap; white-space: -moz-pre-wrap"><%=(rs.Fields.Item("content").Value)%></pre></td>