修复了 table 单元格大小和相对于宽度的内容显示长度

Question

我想用 HTML 和 CSS 制作一个 table。但问题是 table 单元格的内容正在改变它的宽度和高度。我只想显示适合单元格的起始内容。

我得到的：

|           |           | This is some random sentence |
| Column 1  |  Column 2 | I have typed here just to    | 
|           |           | demonstrate you.             |

我想要的：

| Column 1  |  Column 2 | This is some random sente... |

是否可以使用内置的 html/CSS 功能来做到这一点？如果没有，还有什么方法可以做到这一点？

Answer 1

-webkit-line-clamp

.long-text{
  width:160px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
  overflow: hidden;
}
td{
  border:1px solid;
  padding:3px;
}

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td class="long-text">This is some random sentence I have typed here just to demonstrate to you.</td>
    <tr>
</table>

修复了 table 单元格大小和相对于宽度的内容显示长度

Fixed table cell size and display length of content with respect to width

html

css

html-table

web-deployment