如何将td中的长文本分成3行(具有特定宽度)?

我想将特定的td分为3行,并为该特定的列设置特定的宽度,因此,如果溢出3行,则将3个点放入“ ...”。 总的来说,我需要符合以下条件的td:

  1. 宽度200像素
  2. 可以坐三行
  3. 如果大小超出上述范围,则放置“ ...”
评论
  • yvero
    yvero 回复

    您可以使用线夹:

    table, th, td {
      border: 1px solid black;
    }
    td {
    	width: 100px;
         display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;  
      overflow: hidden;
    }
    <table>
      <tr>
        <td>Cell ACell ACell ACell ACell ACell ACell ACell ACell All ACell ACell A</td>
        <td>Cell B</td>
      </tr>
    </table>
  • 莫念他
    莫念他 回复

    添加此CSS将完成这项工作

    {
        width:80%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        background:#fff;
        position:absolute;
    }
    
    • 必须具有width,max-width或flex-basis
    • 必须有空格:nowrap
    • 必须具有可见值以外的其他值
    • 必须显示:block或inline-block(或功能等效的项目,例如flex项目)。
    p {
        width:80%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        background:#fff;
        position:absolute;
    }
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>