Question

如何防止这样的字符串：

1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg

破破烂破吗？又名

1ffa6fyfguyyg-
gfbhf-rtydrygd-
dry6r-5r-rtd.jpg

我尝试了以下代码：

.filename{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 95%;
}

但是没有运气。

基本上，我想做的是在<td>元素中显示文件名，如果文件名太长，请添加三个点。它可以在某些文件名上正常工作，但在类似文件名的文件名上会破折号

谢谢！

Answer 1

您可以添加display: block;以覆盖表格显示格式。如果这不是一种选择，请考虑完全远离表。他们通常会与其他CSS规则发生奇怪的互动。

.container {
  height:200px;
  max-width:10%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display:block;
}

<table>
<tr>
<td class="container">
  block-of-text-with-breaks-but-has-dashes
</td>
</tr>
</table>

Answer 2

将table-layout: fixed;添加到您的<table>中，下面是一个示例：

table {
    table-layout: fixed;
    width: 50px;
}
td {
    border: 1px solid black;
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

  <table>
    <tr>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
    </tr>
    <tr>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
     <td>1ffa6fyfguyyg-gfbhf-rtydrygd-dry6r-5r-rtd.jpg</td>
    </tr>
  </table>

防止CSS破折号

2 个答案: