Как разделить длинный текст в тд на 3 строки, которые имеют указанную ширину c?

Question

Я хочу разделить специфицированный c td на 3 строки и задать специфику c width для этого конкретного столбца, поэтому, если это переполнение 3 строки, ставим 3 точки "...". В общем, мне нужно тд со следующими критериями:

1. Ширина 200px
2. Может занять 3 строки
3. Если переполнение размеров выше ввода "..."

Answer 1

Добавление этого css сделает работу

{
    width:80%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background:#fff;
    position:absolute;
}

• должно иметь ширину, максимальную ширину или гибкую основу
• должно иметь пробел: 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>

Answer 2

Вы можете использовать линейный зажим:

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>