(转)关于在<td>中显示文本的自动截断

最新推荐文章于 2020-11-29 01:52:13 发布
最新推荐文章于 2020-11-29 01:52:13 发布
阅读量302 收藏
点赞数
分类专栏： Javascript 文章标签： C C++ C# XHTML F#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_4558/article/details/81816560
版权


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table
{
 table-layout:fixed;
}
td
{
 text-overflow:ellipsis;
 white-space:nowrap;
 overflow:hidden;
}
</style>
</head>

<body>
<table width="100%" border="1" class="xTable">
  <tr>
    <td width="100">col_1</td>
    <td>col_2</td>
    <td width="120">col_3</td>
    <td width="100">col_4</td>
  </tr>
  <tr>
    <td>abcdefg</td>
    <td>a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z</td>
    <td>abcdefg</td>
    <td>abcdefg</td>
  </tr>
</table>
</body>
</html>

 

 未添加截断字符串样式前：

 添加截断字符串样式后：



 (转自：http://0123.blog.163.com/blog/static/478831200910275422865/)

iteye_4558
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用CSS让<td>截断超长的内容
q77533005的专栏
08-21 414
要点: 1. 2. 设置title是为了让鼠标停留在td框上时能够看到全部内容.
jQuery获取自动截取过长的文本内容,显示成省略号形式。
张虹旺的博客
07-27 4534
table中如果td的内容过多,则会把td撑的很宽, 显得不美观. 如果能让td既美观.也能看到完整的效果..我们则需要,在生成td之前,给指定样式.. 这里采用jQuery来实现.具体代码如下://页面加载之后,设置.样式. jQuery(function(){ //使用id选择器;例如:tab对象->tr->td对象. $("#high_light tr td"
table td 文本自动截断 text-overflow:ellipsis
sqh001的专栏
10-11 1万+
.table-set { table-layout: fixed; }   .table-set td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   http://blog.sina.com.cn/s/blog_53d27b3a0100veuc.html 
td 内容超长截断处理
weixin_30412167的博客
07-05 469
将 td里面的内容超过一定的长度时，将后面的内容省略，并用省略号表示 <html> <head> </head> <body> <table width="200px" style="table-layout: fixed" border=2px ...
css 截取td 的字符串长度
lsjinpeng的专栏
05-08 293
在Div中的方法 就是比如有一行文字，很长，表格内一行显示不下. 就a是比如有一行文字，很长，表格内一行显示不下. 就1是比如有一行文字，很长，表格内一行显示不下. 就F是比如有一行文字，很长，表格内一行显示不下. 就是 Like You Pig Very Very Very Much. 在Table中的方法 内容内容内容内容内容内容内容内容内容内容内容内...
获取网页表格数据 正则表达式
09-14
获取网页表格数据 <tr> <td>正则表达式 获取网页表格数据 <tr> <td>正则表达式
字符编码转换，utf16 utf8 ascii unicode
01-25
utf16<=> utf8 <=> ascii <=>unicode 所有代码都已经经过验证。而且里面也有相应的例子。 所有的编码格式进行转换，windows平台。
怎么去掉form的高度(form不会撑出td)
12-13
加上 复制代码代码如下: <style> form{margin: 0} </style> 就ok了 2. 直接写如form中: <form style=’padding:0px;margin:0px;... <table> <tr> <td> </td> </tr> </table> </for
动态添加html<tr>和<td>
09-30
我觉得挺好用，可以试下！我觉得挺好用，可以试下！我觉得挺好用，可以试下！我觉得挺好用，可以试下！
html中表格td内容自动换行
10-22
文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息 </td> </tr> </table> ``` 这将解决长串...
固定td宽度，超出部分截断
fyqcdbdx的专栏
11-28 2523
在IE下效果很好，固定td的宽度，超出部分截断用...显示，鼠标悬停有截断的则显示其完整的title。firefox不支持，只有截断的效果，无鼠标悬停效果，也没有... 几点说明的，table一定要带table-layout:fixed;样式，否则无效果。固定table的话就带此样式，还能增加显示速度。需要截断的td加上下面的ssss样式，并且td的内容放在div里面，div带'white-sp
html td标签 限制字符长度
qq_34657993的博客
03-07 8498
${entity.newsTitle } title标签体是 鼠标在td标签上显示 文本内容 style具体的就是设置最大的宽度，多余的隐藏，多余的会以“......”
css截取td里面的内容 如何固定td th的宽度
szy1000的专栏
12-23 1万+
css截取td里面的内容 如何固定td th的宽度
table中td用CSS截取字符，超出用省略号...
u012531787的专栏
04-09 3858
html：
HTML如何让table中的td内容过长显示为固定长度，多余部分用省略号代替
梦回星月
05-26 4144
这个问题呢，是由于我们公司测试的部门测出来的，虽然说测试的内容本身就是个BUG，不过这个也让我学到了一个比较好的归类于布局的一个小技巧，就是将td标签中过长的内容只显示为这个td的width的长度，之后的便以省略号代替。 方式如下：        这个功能有一个前提，在table中必须设置style: table-layout: fixed;  这条属性就是让table的内部布局固定大...
css控制td比内容宽5px_纯 CSS 实现多行文字截断
weixin_39837607的博客
11-29 172
做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果，如下图：看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：兼容性好，对各大主流浏览器有好的支持响应式截断，根据不同宽度做出调整文本超出范围才显示省略号，否则不显示省略号省略号位置显示刚好基于上述的准则，下面我就讲介绍各种技巧实现截断效果，并根...
td长度固定，内容过长，超过部分用省略号代替
热门推荐
CHEN的技术积累
07-05 2万+
html的table表格中td长度固定，当内容过长时，超过部分用省略号代替. 具体代码如下:
<td>2023058</td> <td>10 17 22 26 30 33 + 11</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td >0</td> </tr> <tr class="new"> <td>2023059</td> <td></td> <td>24</td> <td>10</td> <td>26</td> <td>31</td> <td>12</td> <td>33</td> <td>24</td> <td>08</td> <td>31</td> <td>24</td> <td></td> </tr> <tr> <td colspan="2">正确次数</td> <td>4</td> <td>3</td> <td>7</td> <td>2</td> <td>9</td> <td>3</td> <td>4</td> <td>5</td> <td>3</td> <td>6</td> <td></td> </tr> <tr> <td colspan="2">错误次数</td> <td>16</td> <td>17</td> <td>13</td> <td>18</td> <td>11</td> <td>17</td> <td>16</td> <td>15</td> <td>17</td> <td>14</td> <td></td> </tr> <tr> <td colspan="2">当前连对</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td></td> </tr> <tr> <td colspan="2">当前连错</td> <td>1</td> <td>4</td> <td>2</td> <td>4</td> <td>1</td> <td>7</td> <td>1</td> <td>2</td> <td>13</td> <td>3</td> <td></td> </tr> <tr> <td colspan="2">最大连对</td> <td>2</td> <td>1</td> <td>3</td> <td>1</td> <td>2</td> <td>1</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td></td> </tr> <tr> <td colspan="2">最大连错</td> <td>9</td> <td>7</td> <td>4</td> <td>12</td> <td>3</td> <td>7</td> <td>7</td> <td>4</td> <td>13</td> <td>3</td> <td></td> </tr> </table> </div> </div> </div> <script type="text/javascript" src="https://img.78500.cn/mobile/iscroll.js"></script> <script type="text/javascript"> var wrapper; function loaded() { wrapper = new iScroll("wrapper", { vScrollbar: false, hScrollbar: false, zoom: true, zoomMin: 0.5, zoomMax: 1 }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); </script></body> </html> 对应上代码用正则表达式提取 以 <tr class="new"> 开头 </tr>结束 里面的数字
最新发布
05-25
可以使用以下正则表达式进行提取： ```python import re text = """<table class="table table-bordered table-condensed"> <thead> <tr> <th>期号</th> <th colspan="11">开奖号码</th> <th>总和</th> </tr> </thead> <tbody> <tr class="new"> <td>2023058</td> <td>10 17 22 26 30 33 + 11</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>0</td> </tr> <tr class="new"> <td>2023059</td> <td></td> <td>24</td> <td>10</td> <td>26</td> <td>31</td> <td>12</td> <td>33</td> <td>24</td> <td>08</td> <td>31</td> <td>24</td> <td></td> </tr> <tr> <td colspan="2">正确次数</td> <td>4</td> <td>3</td> <td>7</td> <td>2</td> <td>9</td> <td>3</td> <td>4</td> <td>5</td> <td>3</td> <td>6</td> <td></td> </tr> <tr> <td colspan="2">错误次数</td> <td>16</td> <td>17</td> <td>13</td> <td>18</td> <td>11</td> <td>17</td> <td>16</td> <td>15</td> <td>17</td> <td>14</td> <td></td> </tr> <tr> <td colspan="2">当前连对</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td></td> </tr> <tr> <td colspan="2">当前连错</td> <td>1</td> <td>4</td> <td>2</td> <td>4</td> <td>1</td> <td>7</td> <td>1</td> <td>2</td> <td>13</td> <td>3</td> <td></td> </tr> <tr> <td colspan="2">最大连对</td> <td>2</td> <td>1</td> <td>3</td> <td>1</td> <td>2</td> <td>1</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td></td> </tr> <tr> <td colspan="2">最大连错</td> <td>9</td> <td>7</td> <td>4</td> <td>12</td> <td>3</td> <td>7</td> <td>7</td> <td>4</td> <td>13</td> <td>3</td> <td></td> </tr> </table> </div> </div> </div> <script type="text/javascript" src="https://img.78500.cn/mobile/iscroll.js"></script> <script type="text/javascript"> var wrapper; function loaded() { wrapper = new iScroll("wrapper", { vScrollbar: false, hScrollbar: false, zoom: true, zoomMin: 0.5, zoomMax: 1 }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); </script></body> </html>""" pattern = re.compile(r'<tr class="new">(.*?)</tr>', re.S) matches = pattern.findall(text) for match in matches: print(match) ``` 这将输出以下内容： ``` <td>2023058</td> <td>10 17 22 26 30 33 + 11</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>0</td> <td>2023059</td> <td></td> <td>24</td> <td>10</td> <td>26</td> <td>31</td> <td>12</td> <td>33</td> <td>24</td> <td>08</td> <td>31</td> <td>24</td> <td></td> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值