html - 如何在跨多行的伪元素中显示文本？

Question

我最初试图隐藏点击后显示的部分内联文本(剧透)。我在隐藏文本中添加了一个伪元素，以添加另一个文本，表明它覆盖了剧透('show spoiler')。

这是我目前所得到的:

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

有没有办法在扰流板跨越多行时显示伪元素中的文本，同时截断太短而无法显示的伪元素中的文本？

Answer 1

希望我没听错。你的问题是“position:absolute”。你可以让它保持静态。因为伪元素总是在前后。

如果错了，也许你可以再解释一下:-)

玩得开心!

$(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: static;
	content: 'show spoiler';
	color: blue;
	text-overflow: ellipsis;
	overflow: hidden;
  display: inline-block;
  min-width: 100px;
  vertical-align: -4px;
  margin-left: 5px;
}

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