`
qingzuochen
  • 浏览: 275665 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用CSS让<td>截断超长的内容

    博客分类:
  • CSS
CSS 
阅读更多
要点:
  1.<table style="table-layout:fixed">
  2.<td nowrap style="overflow:hidden; text-overflow:ellipsis;word-break:keep-all;" title='框中内容'>

设置title是为了让鼠标停留在td框上时能够看到全部内容.
分享到:
评论

相关推荐

    固定宽度表格布局设定宽度问题

    `&lt;table&gt;`定义了整个表格,`&lt;tr&gt;`代表表格行,`&lt;th&gt;`表示表头单元格,而`&lt;td&gt;`用于普通数据单元格。 要设定表格的固定宽度,我们可以在`&lt;table&gt;`标签中使用`width`属性。例如: ```html &lt;table width="600"&gt; &lt;tr&gt;...

    通过css样式控制单元格文本超长省略.doc

    "&gt;用 CSS 实现超长字段被省略的简单方法&lt;/td&gt; &lt;td nowrap bgcolor="#E8FFFF" style="overflow: hidden; text-overflow: ellipsis;"&gt;用 CSS 实现超长字段被省略的简单方法&lt;/td&gt; &lt;td nowrap bgcolor="#E8FFFF" style...

    jquery 截取长文本和css

    方法一:用CSS截断字符串:IE,FireFox,Opera ,Safari都兼容 .subLongText{ width:150px; height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-overflow: ellipsis;/* IE/Safari */ ...

    td单元格内容缩略显示问题

    在网页设计中,表格(Table)是用于组织数据的重要元素,而`td`标签则是定义表格中的单元格。当单元格(td)内的内容过多时,可能会...通过合理利用这些技术,我们可以让网页在内容丰富的同时,保持良好的用户体验。

    css实现不再让内容把td撑开的常用解决方法

    &lt;td&gt;ddddddddddddddddddddddddddddddfsljdflsajufiajklsjadflkjsalkfdjdsklajdflksajflksajfdlkdsjdflksjfjldskajdflksajflskajf&lt;/td&gt; &lt;td width="30%"&gt;dd&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; ``` 通过这种方式,即使单元格中...

    table 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

    首先,我们需要设置`&lt;td&gt;`元素(表格数据单元格)的CSS样式,确保内容不会换行。可以使用以下样式: ```css td { white-space: nowrap; /* 阻止文本换行 */ overflow: hidden; /* 当内容超出单元格宽度时隐藏超出...

    多个div中table的tdwidth设置一样也不法对齐

    &lt;td&gt;内容2,这是一段较长的内容,用来测试宽度是否固定&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;内容3&lt;/td&gt; &lt;td&gt;内容4,这也是一段较长的内容&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; ...

    表格单元格td设置宽度无效始终有内部的内容撑开

    然而,在实际操作中,有时我们会遇到一个棘手的问题:给`&lt;td&gt;`设置宽度(`width`)后,发现宽度设置似乎无效,单元格的宽度仍然被其内部的内容撑开。这个问题在标题和描述中被提及,让我们详细探讨一下这个问题的...

    layui表格内容溢出的解决方法

    &lt;td&gt;&lt;fmt:formatDate type="both" dateStyle="long" timeStyle="long" value="${a.aTime}"/&gt;&lt;/td&gt; &lt;td&gt;${a.whoRelease}&lt;/td&gt; &lt;td&gt; &lt;button class="layui-btn-danger layui-btn layui-delete"&gt;&lt;i class="layui-...

    bootstrap表格内容过长时用省略号表示的解决方法

    在原始CSS中,`&lt;td&gt;` 元素的内容会自动扩展到足够宽以容纳所有文本,这可能导致列宽超出预设。为了使内容在达到固定宽度后显示省略号,可以应用以下CSS样式: ```css .table tbody tr td { overflow: hidden; ...

    将td中文字过长的部分变成省略号显示的小技巧

    在某些情况下,TD中的文字内容可能会超出单元格的实际显示范围,此时就需要对文字进行适当的处理,以保持页面布局的整洁性。本文将介绍如何使用CSS的几个关键属性,将TD中文字过长的部分变成省略号显示的小技巧。 ...

    web1-Sseng-

    7. **表格**:`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`表示行,`&lt;td&gt;`和`&lt;th&gt;`分别代表单元格和表头单元格。 8. **表单**:HTML表单用于用户输入数据,`&lt;form&gt;`元素包含各种输入控件,如`&lt;input&gt;`(文本、密码、复选框、...

    G12-sam-simpson

    8. **响应式设计**:利用`&lt;meta name="viewport"&gt;`和CSS媒体查询实现不同设备的适配。 9. **HTML与CSS结合**:通过`&lt;style&gt;`标签内联样式,`&lt;link&gt;`引用外部样式表,以及使用类选择器、ID选择器等控制元素样式。 10....

    BreakawaySmar.631mr8leyl.gaIw26Y

    2. **HTML标签**:HTML标签有多种,如`&lt;h1&gt;`至`&lt;h6&gt;`用于定义标题,`&lt;p&gt;`用于段落,`&lt;a&gt;`用于创建链接,`&lt;img&gt;`插入图片,`&lt;ul&gt;`和`&lt;li&gt;`创建无序列表,`&lt;ol&gt;`和`&lt;li&gt;`创建有序列表,以及`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`...

    如何通过CSS样式设置单元格显示内容的长度.doc

    当内容过长,我们不希望它完全显示,而是希望通过CSS样式将其截断,并用省略号表示被隐藏的部分。本文将详细介绍如何通过CSS样式实现这一功能,同时结合`table-layout`属性来优化表格的布局性能。 首先,`table-...

    一些使用频率较高的非常实用的PHP函数

    $html .= "&lt;link href='../templates/style.css' type='text/css' rel='stylesheet'&gt;"; $html .= "&lt;/head&gt;&lt;body&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;"; $html .= "&lt;table cellspacing='0' cellpadding='0' border='1' width='450' ...

    html td nowrap不换行属性使用方法

    `nowrap`是一个属性,当应用于`&lt;td&gt;`元素时,它会禁止单元格内的文本自动换行,确保所有内容都在同一行内显示,直到遇到表格的边界或下一个单元格。这个属性对于在有限空间内展示长字符串或避免单词在单元格内被截断...

    HTML长文本截取含有HTML代码同样适用的两种方法

    &lt;td&gt;我是代码:$.fn.substr = function(l,c){ $(this).each(function(i,item)&lt;/td&gt; &lt;td&gt;以下两种方式都可以解决textarea行高自动适应类容的高度&lt;/td&gt; &lt;td&gt;以下两种方式都可以解决textarea行&lt;/td&gt; &lt;/tr&gt; &lt;/table...

Global site tag (gtag.js) - Google Analytics