并非div中所有我的html元素都被截断了

Question

我想使用CSS截断一些文本和表格。由于某种原因，该表没有被省略号省略。只有第一句话的文字才被正确截断。

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="truncate">When you visit our site, pre-selected companies may access and use certain information on your device and about this site to serve relevant ads or personalized content..
<table>
    <thead>
        <tr>
            <th>Location</th>
            <th>Modified</th>
            <th>Type</th>
            <th>File Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
    </tbody>
</table>
</div>