I'm looking for a solution to hide certain parts of inline text (spoilers) that can be revealed when clicked. To accomplish this, I've added a pseudo element to the hidden text that displays additional text indicating it's a spoiler ('show spoiler').
Here's what I have implemented so far:
$(document).ready(function(){
$('.spoiler').attr('title', 'show spoiler').click(function() {
$(this).toggleClass('noSpoiler spoiler');
var title = 'hide spoiler' ;
if( $(this).hasClass('spoiler')){
title = 'show spoiler';
};
$(this).attr('title', title);
});
});.spoiler {
position: relative;
color: transparent;
background: red;
}
.spoiler:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: .25em;
content: 'show spoiler';
color: blue;
text-overflow: ellipsis;
overflow: hidden;
}
.spoiler:hover {
cursor: help;
}
.noSpoiler {
background: rgba(255, 0, 0, .3);
}
.noSpoiler:hover {
cursor: not-allowed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
The lysine contingency - it’s intended to <span class=spoiler>prevent the spread of the animals in case they ever got off the island</span>. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals <span class=spoiler>can’t manufacture the amino acid lysine</span>. Unless they’re continually supplied with lysine by us, they’ll slip into a <span class=spoiler>coma</span> and die.Is there a method to display the text in the pseudo element properly when the spoiler spans multiple lines, while also truncating text in pseudo elements that are too short to display fully?