html中表格内容超出后如何隐藏?

html中表格内容超出后如何隐藏?

超出表格长度的文字会用省略号代替
html中表格内容超出后如何隐藏?_第1张图片

  table{
   width: 300px;
   /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
   table-layout:fixed;
  }
  td{
   border: 1px solid black;
   /*超出部分隐藏*/
   overflow: hidden;
   /* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */
   word-break: keep-all;
   /* 内容超出宽度时隐藏超出部分的内容 */
   white-space:nowrap;
   /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
   text-overflow:ellipsis
  }

#示例代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        table{
      
            border: 1px solid black;
            width: 300px;
            /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
            table-layout:fixed;
        }
        td{
      
            border: 1px solid black;
            /*超出部分隐藏*/
            overflow: hidden;
            /* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */
            word-break: keep-all;
            /* 内容超出宽度时隐藏超出部分的内容 */
            white-space:nowrap;
            /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
            text-overflow:ellipsis
        }
    style>
head>
<body>
    <table>
        <tr>
            <td width="50">第一行第一列td>
            <td width="100">第一行第二列td width="100">
            <td width="150">第一行第三列td width="150">
        tr>
        <tr>
            <td>第二行1td>
            <td>第二行2td>
            <td>第二行3td>
        tr>
        <tr>
            <td>3,1td>
            <td>3,2td>
            <td>3,3文字比较多会这么样呢?td>
        tr>
    table>
body>
html>

你可能感兴趣的:(html表格,表格超出隐藏)