table内容超出宽度时隐藏并显示省略标记

HTML中，一个表格，要达到二个条件：

1、内容多了不自动换行；

2、固定单元格宽度。如果内容超出，则隐藏；

如果在IE下，只是写成<table style="table-layout:fixed; overflow:hidden;"><tr><td nowrap>则可，而在FF下则不行。兼容IE和FF的写法，应该为：<table style="table-layout:fixed;"><tr>td style="overflow:hidden;" nowrap>

3、显示省略标记，只支持IE：

text-overflow:ellipsis;

测试代码：

<tr>

<td width=25% class="td" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>

<td class="td" nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>

</tr>

</table>

table内容超出宽度时隐藏并显示省略标记相关推荐

java让内容不超出单元格_html表格中单元格内容超出不换行和超出宽度自动隐藏并显示省略号及鼠标移入显示全部内容/移出隐藏(用title属性)...
参考https://www.cnblogs.com/yy-hh/p/4523939.html 在表格布局中经常会遇到因为表格内容长短的变化导致错位布局混乱的情况,这个时候我们可能会有为了布局稳定把单元 ...
解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
解决表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
layUI table 内容超出宽度怎么换行显示，而不是显示省略号
页面里加 .mytable .layui-table-cell{ height:auto; overflow:visible; text-overflow:inherit; white-space:n ...
css超出滚动时隐藏滚动条
overflow-y hidden :纵轴隐藏 //css超出滚动时隐藏滚动条 .next-list{ height: 500px; overflow-x: hidd ...
CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
table的行和列的隐藏和显示
今天偶然发现表格隐藏行和列挺好用的,觉得还不错,下面是隐藏和显示table行.隐藏table列(显示的类同)的js函数,直接调用这些函数就可以实现表格行和列的显示和隐藏. 1.显示行 function ...
文本长度过长时隐藏并显示省略号“...”，以及鼠标停留时悬浮显示全部文本(兼容IE)
效果如下: html 如下 <el-form-item label="备注" label-width="60px"><span class=& ...
【HTML】div、p等标签里的文字内容太长，让其显示省略，鼠标滑入再悬浮完整内容。
前言本篇文章将学习的是隐藏文字,让文字显示-省略号,且鼠标滑入再悬浮显示完整内容. 话不多说,直接看效果和讲解吧! 效果展示实践过程(代码讲解) 代码比较简单,也有比较详细的注释:如果其他友友不懂 ...
html 内容未选择时隐藏_html入门标签入门
1. html是由李爵士发明的 2. html由 <!DOCTYPE空格html> 起手表示文档类型 3. 常用的章节标签 * 标题 * 章节 section * 段落 p * 头 ...

table内容超出宽度时隐藏并显示省略标记

table内容超出宽度时隐藏并显示省略标记相关推荐

最新文章

热门文章