Question

我试图隐藏部分内嵌文本（破坏者），这些部分会在点击后显示。我在隐藏文本中添加了一个伪元素，以添加另一个文本，表明它覆盖了扰流板（＆＃39;显示扰流板＆＃39;）。

这是我到目前为止所得到的：

＆＃13;

$(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);
	});
});

＆＃13;

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

＆＃13;

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

＆＃13;

当扰流板跨越多行时，有没有办法在伪元素中显示文本，还会截断伪元素中的文本，这些元素太短而无法全部显示？

Answer 1

我希望我理解你。你的问题是“位置：绝对”。你可以保持静态。因为伪元素总是在前后。

如果错了，也许你可以解释一下： - ）

玩得开心！

＆＃13;

$(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);
	});
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我很高兴听到这个消息。很抱歉没有在发布之前检查它。在Chrome中，一切看起来都不错，但在Firefox中没有;-)。我刚用margin-bottom替换了“vertical-align”。这适用于两种浏览器： - ）。

$(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;
  margin: 0 0 -5px 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.

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

2 个答案: