table{
table-layout: fixed;
}
td{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
原理：
本方法用于解决表格单元格内容过多时的美观问题，主要涉及到4句CSS样式：
1. table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）
2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。
3. overflow: hidden 隐藏超出单元格的部分。
4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
效果图：
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table
{
table-layout: fixed;
width: 100%;
}
td
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<th>
第一列
</th>
<th>
第二列
</th>
</thead>
<tbody>
<tr>
<td>
<span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span><span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span>
</td>
<td>
超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容
</td>
</tr>
</tbody>
</table>
</body>
</html>
兼容性：http://www.php100.com/manual/css3_0/text-overflow.shtml
相关推荐
- 这样设置后，如果 `#div1` 元素内的文本长度超过了元素的宽度，文本将会被隐藏，超出部分以省略号代替。 3. 对于表格中的文本溢出处理： - 表格中的文本溢出可以通过类似的方法处理，但需要注意 `table-layout`...
默认情况下，GridView会尝试在一行内显示所有列的数据，但这可能导致在屏幕空间有限或数据过长时，内容溢出。 针对"省略字符"的需求，我们可以利用两种主要方法来实现： 1. **CSS样式调整**：通过CSS自定义...
在某些情况下，我们可能希望限制单元格的宽度并用省略号显示超出的部分，此时就需要保留或调整 `text-overflow` 的设置。 此外，需要注意的是，这些样式修改可能会影响到表格的整体布局和响应式设计。为了保持良好...
这种技术允许我们限制文本的宽度，当超出限制时，将超出部分用省略号“...”代替，从而保持布局的整洁和美观。 在HTML中，可以使用CSS（Cascading Style Sheets）来实现这一效果。主要涉及到两个关键的CSS属性：`...
在网页设计中，如何控制文本...通过以上设置，我们可以使得一行内文本在超出容器宽度时，不换行并且在结尾处用省略号来代替超出部分的显示。这对于创建整洁且一致的界面设计非常有用，尤其是在处理固定宽度的布局时。
当希望文本在容器内不换行且超出部分以省略号表示时，可以使用以下CSS样式： ```css div { width: 100px; /* 容器宽度 */ overflow: hidden; /* 隐藏超出部分 */ white-space: nowrap; /* 不允许文本换行 */ ...
在这个例子中，`.details`类设置了元素的宽度为300px，并且设置了溢出隐藏，只显示一行文字，多余的文字将被省略号代替，这为`mouseover`事件触发时展示完整内容提供了前提。 ### 5. 动态创建并插入DOM元素 通过...
"省略代替"是指在文字过长时显示省略号，jQuery的`.text()`方法可以配合CSS的`text-overflow`属性，限制文本长度并添加省略号。 总的来说，jQuery实例"菜单、滚动、层隐藏等"涵盖了网页交互设计的核心元素。通过...
- `ellipsis`：显示省略号（...）代替被裁剪的内容。为了使`ellipsis`生效，通常需要将`white-space`设置为`nowrap`，并设置`overflow`为`hidden`，以隐藏超出的文本。 `word-break`属性用于控制单词内是否允许换行...
网站中经常出现一些标题比较长的文章，再调用标题时为了使整体布局美观，需要将标题控制在一行显示，并且截取一定的长度，截取的地方用省略号代替。虽然用动态语言可以对其控制，但是这样做是不利于搜索引擎收录的，...
- **功能概述**：对于过长的字符串，使用省略号来代替，保持界面整洁。 - **实现方法**：利用`DataTextField`属性和JavaScript或CSS来截断过长的文本，并添加省略号。 #### 11. GridView一般换行与强制换行 - **...
11. **用“...”代替超长字符串**：使用`ItemTemplate`中的`Label`控件和CSS样式，当字符串过长时显示省略号。 12. **一般换行与强制换行**：通过`WordWrap`属性控制文本是否换行，` `标签可以强制换行。 13. *...
- 对于过长的文本，可以截取部分显示，并加上省略号，通过CSS和JavaScript实现。 10. **一般换行与强制换行**： - 可以使用HTML的 ` ` 标签或者CSS的 `white-space` 属性控制文本的换行方式。 11. **显示隐藏...
10. **用“...”代替超长字符串**：通过设置`DataTextFormatString`属性，可以限制显示文本的长度，超出部分用省略号表示。 11. **一般换行与强制换行**：在单元格内使用` `标签实现换行，对于固定宽度的列可能...