使用文本溢出时在“...”之后添加加号答案

【问题标题】：Adding plus sign after "..." when using text-overflow使用文本溢出时在“...”之后添加加号
【发布时间】：2015-07-10 15:00:45
【问题描述】：

所以我有一个包含一些文本的表格，我想在一定长度后截断文本。我使用text-overflow 实现了这一点。

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

单击表格单元格时，我希望显示整个文本（通过更改行高）。像这样：

+------------------+       +------------------+
|     Header       |       |     Header       |
+------------------+       +------------------+
| First text block |  -->  | First text block |
+------------------+       +------------------+
| A long text b... |       | A long text      |
+------------------+       | block            |
      ^click               +------------------+

我也成功了。

但我还想在“...”之后放置一个 + 号，以向用户显示该单元格是可点击的！

+--------------------+ 
|       Header       |   
+--------------------+  
| First text block   | 
+--------------------+  
| A long text b... + | 
+--------------------+

我该怎么做？我尝试使用:after，但这只是在整个文本之后添加了+。

到目前为止我得到了什么：http://jsfiddle.net/6qLcrswc/1/

谢谢！

【问题讨论】：

在这种情况下使用纯 CSS 的问题在于，即使文本实际上没有溢出，也会显示 +。

标签： html css

【解决方案1】：

你可以在你的伪元素上设置绝对位置：

$(".overflow").click(function() {
  $(this).toggleClass("overflow");
});

table,
td {
  border: 1px solid black;
}
td {
  width: 70px;
}
td .overflow {
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
}
div {
  position: relative;
}
div::after {
  position: absolute;
  content: " +";
  bottom: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="overflow">A long textfield</div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="overflow">Another long textfield</div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="overflow">The third long textfield</div>
    </td>
  </tr>
</table>

【讨论】：

太好了，谢谢。展开单元格后，删除 + 的最简单方法是什么？
@bjornlof 使用另一个类在未展开时显示 +，如果展开则删除该类。

【解决方案2】：

我建议你使用 cursor:pointer;向用户显示该单元格是可点击的。在后面加上“+”，你可以做那个设置 position:relative;到 div 和绝对到 ::after 伪选择器并用右和上管理。

更新：就像 Mehdi 写的一样

【讨论】：