[HTML]TD中的文本自动换行

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

一起看看吧：

没有使用word-break之前：

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

使用word-break之后：

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

时间： 2024-10-23 18:02:40

[HTML]TD中的文本自动换行的相关文章

Table里td中的文本过长，设置不换行，随内容同行显示(转载)

当td中内容过长时,内容会溢出,换行显示,美观超级差,在td里设置这个属性 "white-space:nowrap   就可以解决排版问题啦 <td style="white-space:nowrap">非法闯入闯出亮灯处理:</td> 不美观的样式: 美观的样式: 另外,nowrap属性可以用在很多标签里面哦,美化排版效果.

设置td中的值自动换行

style="word-wrap:break-word;word-break:break-all;"注意要设置td的宽度,否则没有用word-wrap:设置或检索当当前行超过指定容器的边界时是否断开转行 取值: normal : 默认值.允许内容顶开指定的容器边界 break-word : 内容将在边界内换行.如果需要,词内换行( word-break )也将发生 word-break:设置或检索对象内文本的字内换行行为.尤其在出现多种语言时 取值 normal : 默认值.允许在词间

table中td的内容超出自动换行

给td设置css样式: 1.  td { word-wrap: break-word; } 2. td { overflow-wrap: break-word; } 以上两种样式都可以 一.设置之前 td中的内容超出边框 二.设置之后

当在网页中显示文本过长该怎么办？

当在网页中显示文本过长该怎么办? 当我们在设计网页页面的时候,有时候肯定会遇到这种情况,我们要显示的文本超出了我们元素的宽度.这时候调宽元素的width固然是可以的,但是太宽了又不太美观了.我们可能会想能不能不改变元素的width,让超出的部分隐藏掉,然后鼠标移动到文本上的时候把全部的内容再显示出来.下面我们就来说说CSS中能够实现这种效果的方式... 代码如下,各个样式的注释已经在代码中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

Sublime 小技巧：文本自动换行显示？

Sublime Text tip for wrap line 题记:虽然现在写代码时,一般各种语言的规范都会说写一行代码不要超过好多好多字,如PEP8是79个字符,以便于阅读.但是,有时候还是需要的,如看log,文档等. 有人喜欢默认显示这样的:(强迫症患者) 自动换行显示 也有人喜欢默认显示成那样的:(随心所欲者) 单行显示 也有人喜欢一会这样,一会那样的.(不折腾会死星人) so Sublime 可以通过设置配置,快捷键和插件满足各种不同的需求. 配置 如果想默认打开文件即换行显示,在选项配

canvas文本自动换行

在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写.在此参考文章html5-canvas的绘制文本自动换行来做改写. 根据canvas宽度来做折行 在此根据项目的情况让文本占canvas的八分之五,具体可以根据情况改变所占百分比来显示. /* str:要绘制的字符串 canvas:canvas对象 initX:绘制字符串起始x坐标 initY:绘制字符串起始y坐标 lineHeight:字行高 */ function canvasTextAutoLin

CSS3让文本自动换行——word-break属性

1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-break:break-all; } word-break属性可以使用的值 值 换行规则 IE5以上 Safari与Chrome normal 使用浏览器默认的换行规则 支持 支持 keep-all 只能在半角空格或连字符处换行 支持 不支持 break-all 允许在单词内换行 支持 支持 当wor

CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

<style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } </style> <table style="table-layout:fixed; width: 200px;"> <t

使用jquery合并表格中相同文本的相邻单元格

一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>