Greasy Fork

Youtube主页上预览视频时，视频标题溢出，导致第二行被遮挡看不见。
鼠标悬浮在视频thumbnail预览时会显示与视频标题不一样的标题。会显示打开页面后katakana terminator缓存的第一个视频预览标题。如图在鼠标悬浮在图1的视频上面预览之后，鼠标悬浮在图2的视频后会显示图1的标题。之后无论预览什么视频会一直显示第一个缓存的标题，直到刷新页面为止。

寫了個修復bilibili與ytb的脚本：

// ==UserScript==
// @name Katakana Terminator height repairer
// @namespace http://tampermonkey.net/
// @version 0.1
// @description repair the height problem of Katakana Terminator in certain websites
// @author You
// @match *.bilibili.com/*
// @match *.youtube.com/*
// @icon https://upload.wikimedia.org/wikipedia/commons/2/28/Ja-Ruby.png
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle ( `
.bili-video-card {
position: relative;
--title-font-size: 15px;
--title-line-height: 22px;
--subtitle-font-size: 13px;
--subtitle-line-height: 17px;
--info-margin-top: 8px;
--avatar-size: 36px;
--avatar-margin-right: 8px;
--icon-size: 18px;
--title-padding-right: 16px;
--follow-icon-font-size: 12px;
--follow-icon-line-height: 17px;
--cover-radio: 56.25%
}
.bili-video-card .bili-video-card__info--tit {
padding-right: var(--title-padding-right);
color: var(--text1);
font-size: var(--title-font-size);
line-height: var(--title-line-height);
height: initial;
display: -webkit-flex;
display: flex;
align-items: flex-start;
justify-content: flex-start;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
word-break: break-word!important;
word-break: break-all;
line-break: anywhere;
-webkit-line-clamp: 2
}
.bili-video-card[data-v-15c84221] {
position: relative;
--title-font-size: 15px;
--title-line-height: 22px;
--subtitle-font-size: 13px;
--subtitle-line-height: 16px;
--info-margin-top: 8px;
--avatar-size: 36px;
--avatar-margin-right: 4px;
--icon-size: 18px;
--title-padding-right: 16px
}
.bili-video-card .bili-video-card__info--tit[data-v-15c84221] {
display: -webkit-flex;
display: flex;
align-items: flex-start;
justify-content: flex-start;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
word-break: break-word!important;
word-break: break-all;
line-break: anywhere;
-webkit-line-clamp: 2;
padding-right: var(--title-padding-right);
font-size: var(--title-font-size);
line-height: var(--title-line-height);
height: initial;
color: var(--text1);
transition: color .2s linear
}
#video-title.ytd-video-renderer {
color: var(--yt-spec-text-primary);
-webkit-line-clamp: 2;
font-family: "Roboto","Arial",sans-serif;
font-size: 1.8rem;
line-height: 2.6rem;
font-weight: 400;
overflow: hidden;
display: block;
max-height: 6.3rem;
-webkit-line-clamp: 2;
display: box;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
display: -webkit-box;
}
#video-title.ytd-rich-grid-media {
color: var(--yt-spec-text-primary);
font-family: "Roboto","Arial",sans-serif;
font-size: 1.6rem;
line-height: 2.2rem;
font-weight: 500;
overflow: hidden;
display: block;
max-height: 5.6rem;
-webkit-line-clamp: 2;
display: box;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
}
` );