如何让伪元素文本在多行剧透内容中显示且短内容自动截断？

Great question! Let's fix those two spoiler display issues with some targeted CSS adjustments and a simplified JS script.

The Problems & Solutions #

Your original implementation struggled with multi-line spoilers because the absolutely positioned pseudo-element only covered the bounding box of the spoiler span, not wrapping with the text. For short spoilers, the "show spoiler" text didn't truncate properly when there wasn't enough space. Here's how to fix both:

Updated Code #

JavaScript (Simplified)

We don't need to toggle both classes—just switch the noSpoiler class on/off, which makes the script cleaner:

$(document).ready(function(){
  $('.spoiler').attr('title', 'show spoiler').click(function() {
    $(this).toggleClass('noSpoiler');
    // Swap the tooltip text based on state
    $(this).attr('title', $(this).hasClass('noSpoiler') ? 'hide spoiler' : 'show spoiler');
  });
});

CSS (Fixed for Multi-Line & Truncation)

This CSS ensures the spoiler hint covers the entire text block (even across lines) and truncates when space is limited:

.spoiler {
  position: relative;
  background-color: red;
  cursor: help;
  color: transparent; /* Hide original text initially */
  box-sizing: border-box;
}

.spoiler::before {
  content: 'show spoiler';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red; /* Match parent background to cover text */
  color: blue;
  padding: 0 0.25em;
  /* Vertically center the hint text */
  display: flex;
  align-items: center;
  /* Truncate long hint text for short spoilers */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Let clicks pass through to the parent span */
  pointer-events: none;
  box-sizing: border-box;
}

/* Styles when spoiler is revealed */
.spoiler.noSpoiler {
  background-color: rgba(255, 0, 0, .3);
  cursor: not-allowed;
  color: inherit; /* Show original text */
}

.spoiler.noSpoiler::before {
  display: none; /* Hide the hint once revealed */
}

HTML (Unchanged)

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

Key Improvements Explained #

1. Multi-Line Spoilers:

   • The pseudo-element now covers the entire span (top/left/right/bottom set to 0), so it wraps with the text across multiple lines.
   • display: flex and align-items: center keeps the "show spoiler" hint vertically centered, no matter how many lines the spoiler takes up.
   • pointer-events: none ensures clicking anywhere on the spoiler (even the hint text) triggers the reveal action.

2. Short Spoiler Truncation:

   • white-space: nowrap forces the hint text to stay on one line, overflow: hidden cuts off excess, and text-overflow: ellipsis adds a clean省略号 when the hint doesn't fit.
   • box-sizing: border-box ensures padding doesn't break the width calculation for truncation.

内容的提问来源于stack exchange，提问作者Jeroen