Javascript脚本:
window.addEventListener('load', function () {
var ele = document.querySelector('.Lyrics_box'),
width = ele.dataset.width,
styles = document.createElement('style');
/* 计算渲染后的实际宽度,这部分备用
var content = document.querySelector('#mw-content-text'),
bodyWidth = parseInt(window.getComputedStyle( content, null ).getPropertyValue('width'),10);
*/
styles.innerHTML = '@media only screen and (min-width:720px) { div.Lyrics_box { width:' + width + '; } }';
document.head.appendChild(styles);
});
//
CSS样式表:
*/
.Lyrics_box {
width: 100%;
max-width: 1080px;
display: inline-block;
}
.Lyrics_box.Lyrics_has_ruby .Lyrics_original,
.Lyrics_box.Lyrics_has_ruby .Lyrics_translated {
line-height: 2.1;
}
.Lyrics_box.Lyrics_no_ruby .Lyrics_original,
.Lyrics_box.Lyrics_no_ruby .Lyrics_translated {
vertical-align: top;
}
.Lyrics_box .Lyrics_original,
.Lyrics_box .Lyrics_translated {
width:100%;
display: inline-block;
white-space: pre-wrap;
}
@media only screen and (min-width:720px) {
.Lyrics_box .Lyrics_original {
margin-right:10px;
}
.Lyrics_box .Lyrics_original,
.Lyrics_box .Lyrics_translated {
width: calc(50% - 5px);
}
}
.Lyrics_gradient {
-webkit-background-clip: text;
background-clip: text;
-webkit-box-decoration-break: clone;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
position:relative;
}
.Lyrics_gradient ruby, .Lyrics_gradient rb, .Lyrics_gradient rt {
background: inherit;
}
.Lyrics_gradient:hover::before {
content:attr(title);
position:absolute;
bottom:100%;
left:0;
background:#fff;
white-space:nowrap;
font-size:0.8em;
border:1px solid #a7d7f9;
border-radius: 4px;
padding:0 3px;
box-shadow:1px 1px 1px #ccc;
color:#000;
-webkit-text-fill-color: initial;
text-fill-color: initial;
}
/*