I just spent way too long muddling through this to make a silly reaction post, and I still haven't figured out the last problem, but I'm proud of how much I did get working. Maybe someone has a solution for the last part (though it may require much more complicated code that I wouldn't end up bothing with anyway).
line-breaks
How does this work? Well, like most interactions in css crimes, it's a <details> tag, but the first part I feel clever about is making the <details> tag open by default and making the contents outside the <summary> a <span> that covers the width and height of it, making it automatically cover the <summary> text. The second part that makes me feel really clever is giving that span pointer-events: none; - that means when you click on it, the event falls through to the <summary> and closes the <details>, revealing the hidden text. (Originally I just copied the text in both child elements, but then realized setting width and height let me skip that, and I don't have a way to check but hopefully makes it more accessible, since the text isn't doubled?).
Here's the code:
Discord Style Spoiler Tags<div>Anyway, spoiler for the end of this post, the problem is <details open style="display: inline; position: relative; cursor: pointer;"><summary style="display: inline; background: lightgray;">line-breaks</summary><span style="display: inline; background: black; pointer-events: none; position: absolute; width: 100%; height: 100%; left: 0px;"></span></details>. So if anyone has any clever ideas, go for it.</div>
And I actually generated it on prechoster with this HTML:
Discord Style Spoiler Tags<div>Anyway, spoiler for the end of this post, the problem is <details open class="parent"><summary class="unspoiled">line-breaks</summary><span class="spoiled"></span></details>. So if anyone has any clever ideas, go for it.</div>
and this CSS:
Discord Style Spoiler Tags.parent {display: inline; position:relative; cursor:pointer} .unspoiled {display:inline;background:lightgray;text:black} .spoiled {display:inline;background:black;text:black;pointer-events:none;position:absolute;width:100%;height:100%;left:0}
So, the problem... with display:inline, or at least? Making a <details> inline? Is that if it goes past the end of the line, it gets put on its own new line, instead of breaking over multiple lines like it would on Discord. I spent too long figuring out that that was the problem because my test case was too long to begin with so it looked like it just always displayed as a block, but inline does work for short bits of text at least. If I did get it to break across lines, my empty span trick might not work anyway. Only idea I can think of is go back to having the details text be a copy of the summary text to make it the right width and writing a script to break each one into a bunch of smaller one-word elements that would break across lines, but that's a lot of work and I'm not sure if that would work anyway.