样式-文字长度截取

最新推荐文章于 2023-04-18 11:51:05 发布

weixin_30622181

最新推荐文章于 2023-04-18 11:51:05 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/goodbye305/archive/2008/06/23/1228095.html

本文展示HTML中使用固定布局、文本溢出处理等样式技巧，包括使用table-layout:fixed、text-overflow:ellipsis、overflow:hidden和white-space:nowrap来实现特定的布局效果。

关键样式:
table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
white-space: nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 (For IE,Mozilla)

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2

"<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">
3

<html>
4

<head>
5

<title>FLYSO Blog</title>
7

</head>
8

<body>
9

<table width="100%" border="1" cellspacing="2" cellpadding="2" style="table-layout:fixed">
10

<tr>
11

<td width="10%">一</td>
12

<td><div STYLE="width:60%;overflow:hidden;text-overflow:ellipsis"> <nobr> FLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO BlogFLYSO Blog </nobr></div></td>
13

<td width="30%"> </td>
14

</tr>
15

<tr>
16

<td>二</td>
17

<td><div STYLE="width:100%; overflow:hidden;text-overflow:ellipsis"> <nobr>FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌</nobr></div></td>
18

<td> </td>
19

</tr>
20

<tr>
21

<td>三</td>
22

<td><div STYLE="width:100%; overflow:hidden;text-overflow:clip"> <nobr>FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌</nobr></div></td>
23

<td> </td>
24

</tr>
25

<tr>
26

<td>四</td>
27

<td><div STYLE="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px"> FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌 FLYSO 不老歌</div></td>
28

<td> </td>
29

</tr>
30

</table>
31

</body>
32

</html>
33

转载于:https://www.cnblogs.com/goodbye305/archive/2008/06/23/1228095.html