thingir

table内容过多是省略显示……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.autocut td{overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}

.autocut{table-layout:fixed;}

</style>

</head>


<body>

<table width="550" border="0" cellpadding="5" cellspacing="1" class="autocut" bgcolor="#007373" >

  <tr>

    <th nowrap bgcolor="#159AA2" >List1</th>

    <th nowrap bgcolor="#159AA2">List2</th>

    <th nowrap bgcolor="#159AA2">List3</th>

  </tr>

  <tr>

    <td  >内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示</td>

    <td>内容过多是省略显示</td>

    <td>内容过多是省略显示内容过多是省略显示内容过多是省略显示</td>

  </tr>

</table>


</body>

</html>


属性nowrap:

一般情况下浏览器会忽略空格;而white-space 如何处理元素内的空白的属性;

可能的值值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。pre-wrap保留空白符序列,但是正常地进行换行。pre-line合并空白符序列,但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。

*还有一种控制表格内容在一定宽度内自动换行的属性:word-wrap:break-word

评论