`
hiuman
  • 浏览: 52283 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

用css控制table td内文字超出隐藏

    博客分类:
  • css
css 
阅读更多
(如有错敬请指点,以下是我工作中遇到并且解决的问题)

效果图:


重点是把table设置为table-layout: fixed;
超出的文字隐藏的效果才有。
p标签超出的文字隐藏的效果不需要设置这个内容就可以有效果。


<table border="1">
	<tbody>
		<tr><td>1</td><td>fdsfsdafdsafsafdsfsdafdsafsafdsfsdafdsafsajghjgkghfjgfjgfjfgaa</td><td>1</td></tr>
		<tr><td>1</td><td>1</td><td>1</td></tr>
	</tbody>
</table>


body{
	margin: 0;
	padding: 0;
	width: 100%;
}
table{
	border-collapse: collapse;
	width: 96%;
	margin: 0 2%;
	table-layout: fixed;
}
tr{
	width: 100%;
}
tr td{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
tr td:nth-child(1),tr td:nth-child(3){
	width: 20%;
}
tr td:nth-child(2){
	width: 56%;
}
  • 大小: 1.3 KB
分享到:
评论

相关推荐

    CSS实现table td中文字的省略与显示(兼容IE与FF、Chrome)

    总结来说,CSS实现table td中文字的省略与显示,主要是通过组合使用`overflow`, `white-space`, `text-overflow`等属性,并考虑浏览器兼容性,来达到在有限空间内展示信息的目的。通过鼠标悬停时改变CSS样式,可以...

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

    在网页设计中,经常需要处理表格(table)的布局问题,特别是当单元格(cell)内的文本内容过长时,如何保持单元格的固定宽度,不让内容换行,并在显示不下的情况下添加省略号("...")表示内容被截断。这涉及到CSS...

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

    在示例代码中,可以看到`&lt;td&gt;`标签内的内容非常长,但实际显示时,只有“dd”和一串被截断的长字符串,后面跟着省略号,这正是上述CSS属性组合应用的结果。 通过这种方式,我们可以确保表格的布局不受单元格内容...

    解决layui表格内文本超出隐藏的问题

    在Layui中,表格内文本超出隐藏的问题可以通过CSS样式控制来解决。通常情况下,Layui表格的默认样式会使得超出文本部分隐藏,如果需要显示超出的文本,需要调整对应的CSS样式。这里提供了一种方法,即通过修改`....

    css控制文字自动换行的实现方法

    以上内容详细介绍了CSS中关于如何控制文字自动换行的几种实现方法,这在网页布局和排版中非常关键,能够帮助开发者更加精确地控制页面的显示效果,提升用户体验。在实际应用中,需要结合不同浏览器的兼容性来选择...

    可调整列宽TABLE

    在CSS中,我们可以通过设置`table`、`th`、`td`等元素的样式来控制表格的外观。例如,我们可以设定`white-space: nowrap`防止单元格内容换行,避免内容溢出。同时,通过设置`overflow: hidden`,当内容超过列宽时,...

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

    在网页设计中,表格(Table)是用于组织数据的重要元素,而`td`标签则是定义表格中的单元格。当单元格(td)内的内容过多时,可能会导致布局混乱或者阅读不便。为了解决这个问题,我们可以采用“缩略显示”技术,使...

    div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...

    当内容在容器内宽度不足以完整显示时,浏览器默认会将文字换行,但是有些时候我们不希望文字进行换行显示,而是希望超出容器宽度的部分不显示或者使用省略号来代替。对于这类需求,可以通过CSS来实现。 在CSS中,...

    jquery拖动的table表格的宽度隐藏表格中的内容

    当表格列的宽度减小到一定程度时,可能无法完全显示所有内容,这时我们可以使用CSS的`overflow`属性来控制内容的溢出。例如,设置`overflow: hidden;`可以使超出列宽的内容不可见。 为了在宽度达到特定阈值时自动...

    CSS自动换行

    ### 二、使用`table`布局 对于复杂的布局结构,如表格或卡片式布局,可以利用`table`元素的特性实现自动换行: 1. **固定列宽(IE)** - 通过设置`table-layout: fixed;`属性,可以让表格中的列宽固定,从而强制...

    CSS超出文本指定宽度用省略号代替和文本不换行

    本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时,可以使用以下CSS样式: ```css .text-overflow { ...

    网页制作 TD也可以溢出隐藏显示

     不记得是什么时候,有人在用table模拟DataGrid的时候说,为什么td超出设置为固定宽度的文字不能隐藏,而是会直接换行呢?  是的,事实确实如此,如: &lt;style type=”text/css”&gt; table {width:500px;...

    纯CSS实现的表格滚动条效果

    本主题聚焦于如何使用纯CSS技术来实现一个既美观又实用的表格滚动条效果。这种效果可以让用户在不改变表格整体布局的情况下,优雅地浏览表格中的所有内容。 首先,我们来探讨CSS在创建滚动条样式上的关键属性。CSS3...

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

    `overflow: hidden`属性用于隐藏超出部分的文本,而`text-overflow: ellipsis`则告诉浏览器使用省略号来表示被截断的文本。`&lt;nobr&gt;`标签用于阻止文本换行,确保所有文本都在同一行内。同时,我们还添加了一个`title`...

    css之使table也能overflow:hidden

    在Web前端开发中,我们常常会遇到需要对表格(table)中的内容进行溢出隐藏的需求,即超出表格单元格(td)的文本部分不显示,这时就需要使用CSS的overflow属性。然而,直接在td元素上应用overflow:hidden并不如在...

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

    在网页设计中,有时我们需要控制单元格(td)内的文本显示长度,特别是在处理表格数据时。当内容过长,我们不希望它完全显示,而是希望通过CSS样式将其截断,并用省略号表示被隐藏的部分。本文将详细介绍如何通过CSS...

    table标签做的静态网页

    - `overflow`属性可以帮助隐藏超出容器的图片部分,从而实现滚动效果。 5. **文件结构和`web`目录**: - 在`web`目录下,可能包含HTML文件(如`index.html`)、CSS文件(如`style.css`)和图片资源文件(如`...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    当希望文本在容器内不换行且超出部分以省略号表示时,可以使用以下CSS样式: ```css div { width: 100px; /* 容器宽度 */ overflow: hidden; /* 隐藏超出部分 */ white-space: nowrap; /* 不允许文本换行 */ ...

Global site tag (gtag.js) - Google Analytics