我经常会遇到这样的问题:在设计好宽度的表格中,因为有些文本信息过长,而把表格撑开(弄的面目全非)!很让人头疼。其实解决这个问题很简单,只要在<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>
相关推荐
TD200文本显示器快速入门doc,TD200文本显示器快速入门
TD220文本显示器用户手册
TD 220系列文本显示器的最新版本 V8.0C
TD400文本文档说明 详细介绍TD400C的使用
MSRA – TD500 图像数据集被用于评估文本检测 算法 基准,它包含多种类和多国语言的 500 张自然图像,分别是 300 张训练图和 200 张测试图。 该数据集使用袖珍相机从室内和室外场景拍摄,其中室内图像以标志,门板...
TD200文本显示器中文手册rar,TD200文本显示器中文手册
TD200文本显示器的使用pdf,TD200文本显示器的使用
TD文本分割替换工具1.0,用来分割较大的txt文件。
本手册是文本编辑说明,希望对你有用,因为本人已从该说明中有过真正的经历,希望对你有用
西门子 PLC S7-200在TD文本显示器上显示实时时钟zip,西门子 PLC S7-200在TD文本显示器上显示实时时钟:本文介绍了如何在TD文本显示器上显示实时时钟的方法
西门子LOGO!TD(文本显示器)的使用pdf,西门子LOGO!TD(文本显示器)的使用: 本文介绍了如何对LOGO!TD(文本显示器)进行安装和接线,以及信息文本显示器指令的编程使用。 ......
javascript 使td内容不换行不撑开如何实现,本文将详细介绍,需要了解的朋友可以参考下
本文档讲解了s7-200所使用的文本显示器(TD)。
S5 TD390文本面板.pdfpdf,S5 TD390文本面板.pdf
西门子_LOGO! TD(文本显示器) 的使用pdf,
描述S7-200 simatic 文本显示TD400的用户手册
SIMATIC S7-200 文本显示设备TD400C用户手册pdf,SIMATIC S7-200 文本显示设备TD400C用户手册
在TD 文本显示器上显示实时时钟(含视频).可以应用于西门子公司的文本显示器TD400C。
西门子 在TD文本显示器上显示实时时钟
内容把td撑开的情况想必大家都有遇到过吧,解决方法有很多,下面本文为大家介绍下一种常见的解决方法,感兴趣的朋友可以参考下哈,希望对大家有所帮助