Question

所以我有一个带有一些文本的表格，我希望在一定长度后截断文本。我使用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/

谢谢！

Answer 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>

Answer 2

我建议你使用cursor：pointer;向用户显示该单元格是可点击的。在此之后加上“+”你可以做那个设定位置：相对; to div和absolute to :: after伪选择器并使用right和top进行管理。

更新：完全像迈赫迪写的那样

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

2 个答案: