我最初试图隐藏点击后显示的部分内联文本(剧透)。我在隐藏文本中添加了一个伪元素,以添加另一个文本,表明它覆盖了剧透('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.
有没有办法在扰流板跨越多行时显示伪元素中的文本,同时截断太短而无法显示的伪元素中的文本?
最佳答案
希望我没听错。你的问题是“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.
关于html - 如何在跨多行的伪元素中显示文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48283468/