Hinzufügen Pluszeichen nach „...“ bei der Verwendung von Text-Überlauf

Question

So habe ich eine Tabelle mit Text und ich mag den Text nach einer bestimmten Länge kürzen. Ich habe dies unter Verwendung erreicht.

Wenn ich auf die Tabellenzelle klicke, soll der ganze Text angezeigt werden (durch Ändern der Höhe der Zeile). Wie folgt:

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

Ich habe es auch geschafft.

Aber ich mag auch platzieren ein + nach dem „...“, um den Benutzer zu zeigen, dass die Zelle anklickbar ist!

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

Wie kann ich das tun? Ich habe versucht, :after, aber das nur die + nach dem ganzen Text hinzugefügt.

Was ich bisher habe: http://jsfiddle.net/6qLcrswc/1/

Dank!

Answer 1

Sie können nur Position absolut auf dem Pseudo-Element:

$(".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

Ich rate Ihnen Cursor zu verwenden: pointer; um dem Benutzer anzuzeigen, dass die Zelle anklickbar ist. Um "+" danach zu setzen, können Sie diese Einstellungsposition machen: relativ; div und absolut zum :: After Pseudo Selektor und Verwalten mit rechts und oben.

UPDATE: Genau wie Mehdi