DIV Abgekürzt mit Ellipse in Kurzform, erweitert beim Anklicken Icon

Question

In dieser Geige muss ich einen DIV auf eine Anfangsbreite von 250px abschneiden, was ich bereits mit '...' mache; beim Klicken auf mein eigenes "?" Taste dehnt es sich dann auf 500px:

https://jsfiddle.net/my8jpn01/16/

CSS

.truncate { 
    width: 250px; 
    /* need automatic multi-line height */ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    border:1px solid #999999; 
    float: left; 
    word-wrap: break-word; 
} 

JS

$('.helpicon').on('click', function() { 
$('.truncate').css('width','500px'); 
$('.truncate').css('overflow','visible'); 
}); 

Meine Probleme:

1) Die erweiterte DIV mehrzeiligen sein muss, variable Höhe. Gerade jetzt ist es überfüllt, sogar mit dem Wortumbruch. Das Einstellen einer Höhe funktioniert nicht.

2) Gibt es eine Möglichkeit, das "?" Teil des abgeschnittenen DIV?

3) Es sollte einen Link zum Ausblenden geben, sobald er erweitert wurde, um zur ursprünglichen komprimierten Version zurückzukehren.

Vielen Dank!

Answer 1

Ein sehr kurzes Beispiel. Sie können dies tun, indem Sie eine Klasse hinzufügen/entfernen. Legen Sie den klassenspezifischen Stil für die benötigten Eigenschaften fest.

.truncate.truncated { 
    white-space: initial; 
    width: 500px; 
} 

DEMO https://jsfiddle.net/my8jpn01/19/

IE11 nicht wie initial für white-space. Verwenden Sie ggf. inherit oder normal, um auf die Standardeinstellungen zurückzusetzen.

.truncate.truncated { 
    white-space: normal; 
    width: 500px; 
} 

Answer 2

Man könnte es wie folgt zu tun:

Statt die CSS-Eigenschaften des div mit jquery zu verändern, sondern können jQuery hinzufügen (Toggle) eine Klasse zum div und setzen auf einmal mehrere Eigenschaften.

$(function() { 
 

 
$('.helpicon').on('click', function() { 
 
    //get the current text value of the ? or X 
 
    var text = $('.helpicon').text(); 
 
     //when we click the ? or X, toggle an open class 
 
    \t $('.truncate').toggleClass('open'); 
 
    //toggle the X with an ? 
 
    $('.helpicon').text(text == "X" ? "?":"X"); 
 
\t }); 
 
    
 
});

.truncate { 
 
    width: 250px; 
 
    /* need automatic multi-line height */ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    border:1px solid #999999; 
 
    float: left; 
 
    word-wrap: break-word; 
 
} 
 
.truncate.open { 
 
    width: 500px; 
 
    white-space: normal; 
 
    text-overflow: inherit; 
 
} 
 

 
.helpicon { 
 
    position: relative; 
 
    float:right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="truncate"> 
 
<a class="helpicon" href="#"> 
 
    ? 
 
</a> 
 
    Explanation text provided in this truncated paragraph which can be expanded by clicking the 'i' Information icon -- now you are viewing the full paragraph in expanded form -- multiline example 
 
</div>