html - 溢出时不出现点

Question

我有一个表格，中间的单元格包含长文本。 我发现下面的 CSS 理论上应该防止文本溢出并在末尾添加一些点。它确实防止它溢出，但是没有点。你能帮我理解为什么吗？

我希望它是这样的:long tex...

.headlinesStyle {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}

.headlinesStyle::selection {
  color: transparent !important;
}

.headlinesStyle:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

<table>
  <tr>
    <td>short text</td>
    <td><span class='headlinesStyle'><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </a></span></td>
    <td>short</td>
  </tr>
</table>

Answer 1

您可以通过使用 white-space 和 text-overflow 来实现这一点，如下所示:

.dots {
    max-width: 300px;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
    color: black; //if you want to color the dots
}


<table>
  <tr>
    <td>short text</td>
    <td class="dots"><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXTTEXTTEXTTEXTTEXTTEXT </a></td>
    <td>short</td>
  </tr>
</table>

这是一个有效的 jsfiddle:http://jsfiddle.net/o24b6w0u/2/