html - 防止 css 在破折号上打断句子

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>