`
xf_zhanghaidong
  • 浏览: 28253 次
  • 性别: Icon_minigender_1
  • 来自: 襄樊
社区版块
存档分类
最新评论

table td 文字超出显示省略号

阅读更多
<!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>
<title></title>
<style type="text/css">
.tb{width:800px;font-size:12px;background:#6887D9}
.tb thead th{height:25px;background:#217AC4;color:white}
.tb tbody td{height:22px;background:white;padding-left:3px;}
.autocut {
	width:200px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	-icab-text-overflow: ellipsis;
	-khtml-text-overflow: ellipsis;
	-moz-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
}

</style>
</head>
<body>
 <table class="tb" border="0" cellpadding="1" cellspacing="1">
	<thead>
		<tr>
			<th>Column1</th>
			<th>Column2</th>
			<th>Column3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Column1</td>
			<td width="200px;"><div class="autocut">放松的方式方法对所发生的放松的方式的方式</div></td>
			<td>Column3</td>
		</tr>
		<tr>
			<td>Column1</td>
			<td width="200px;"><div class="autocut">放松的方式方法对所发生的放松的方式的方式</div></td>
			<td>Column3</td>
		</tr>
		<tr>
			<td>Column1</td>
			<td width="200px;"><div class="autocut">放松的方式方法对所发生的放松的方式的方式</div></td>
			<td>Column3</td>
		</tr>
	</tbody>
  </table>
</body>
</html>
分享到:
评论

相关推荐

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

    要实现TD文字过长部分显示省略号的效果,我们首先需要设置表格的样式为`table-layout: fixed;`,这样表格的布局就是固定宽度的,不会因为内容的多少而改变每一列的宽度。然后,为TD元素设置一个固定的宽度,这是必须...

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

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

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

    3. `text-overflow: ellipsis`: 当`overflow`设置为`hidden`且`white-space`为`nowrap`时,这个属性会在文本末尾添加省略号("…"),表示有隐藏的内容。 4. `-o-text-overflow`, `-icab-text-overflow`, `-khtml-...

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

    总结,通过CSS的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`属性,我们可以有效地控制文本在指定宽度内的显示,避免文本换行并用省略号表示超出的部分。对于表格和多行文本,可能需要...

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

    首先 ,bootstrap中当td内容超过我给的固定宽度时,省略号代替的代码如下: &lt;table class=table&gt; 商品名称 详细介绍 购买数量 &lt;tbody i

    Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法

    CSS样式用于定义表格的布局,包括固定宽度、文字居中、溢出隐藏、省略号显示以及行高和边框等。特别地,`.layui-layer`类将用于在悬停时显示完整内容。 ```html &lt;!DOCTYPE html&gt; 表格内容溢出省略号显示 /*...

    CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

    根据标题和描述,以及提供的部分内容,我们可以了解关于CSS文本超出指定宽度后隐藏并显示为省略号的实现方法,以及相关的知识点。以下详细说明: 1. CSS中实现文本溢出显示省略号的基本属性组合: - `text-...

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

    为了解决这个问题,我们可以采用“缩略显示”技术,使超出长度的内容以省略号(...)的形式呈现,同时保持整体布局的整洁和易读性。本文将详细探讨如何处理`td`单元格内容的缩略显示问题。 一、CSS样式控制 1. `...

    表格单元格内容超出时显示省略号效果(实现代码)

    这里`.td`选择器针对表格中的所有单元格生效,这样,当单元格中的内容超过预设宽度时,就会在结尾显示省略号,而不是无限制地撑开单元格的宽度。 总结来说,通过设置`table-layout: fixed;`并合理利用`white-space`...

    table中的超长字符串用省略号表示的css样式

    为了保持表格布局的一致性,同时避免过长的字符串破坏布局,我们通常会使用CSS样式来控制这些超长字符串的显示方式,使其在超出单元格宽度时能够以省略号(...)的形式显示。 在CSS中实现文本溢出用省略号表示的...

    table表格某一td内容太多导致样式混乱的解决方案

    `来显示省略号,提示用户内容被截断。 - 应用适当的内边距和外边距,提高内容的可读性和表格的美观度。 - 考虑使用响应式设计,根据不同的屏幕尺寸调整表格的显示方式,以适应移动设备和不同分辨率的屏幕。 综上所...

    css控制文本实现越界省略号以及自动换行

    因为表格默认会根据内容调整列宽,所以要固定列宽并实现省略号效果,需要设置`table-layout: fixed`,然后对每个单元格(`td`)应用上述的越界省略号样式: ```css table { width: 30em; /* 设置表格宽度 */ table-...

    使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

    对于名称,我们使用了条件渲染(v-if)来判断是否显示省略号。当鼠标悬停在名称上时,触发`mouseenterHander`方法;移开鼠标时,触发`mouseoutHander`方法。同时,我们还创建了一个类为`dpop`的弹窗div,它在`...

    CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现

    在本篇文档中,我们将深入学习如何使用CSS控制文本的显示方式,具体来说是如何实现当文本超出指定宽度时,在文本的末尾显示省略号,并且文本不换行。这种效果在网页设计中非常常见,它能够帮助我们优雅地处理那些...

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

    总之,通过上述设置,当表格中的内容宽度超出单元格宽度时,超出部分将不会显示,而是被隐藏起来,并以省略号的形式提示用户有内容被隐藏。这种方法不仅提高了表格的可视性,也优化了用户的阅读体验。对于使用layui...

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

    通过这种方式,即使单元格中的内容很长,也不会再把单元格撑开,而是保持设定的宽度,超出部分的内容会被隐藏并显示省略号。这个解决方案在处理长文本或者不确定内容长度的情况下非常实用,可以有效地保持表格的整洁...

Global site tag (gtag.js) - Google Analytics