YouTubeのチャンネル名やタイトルが「…」で省略される問題をCSSで解決する
YouTubeを使っていて「チャンネル名が…で切れて読めない」「ショートや検索結果でタイトルが途中までしか出ない」そんなストレスを感じたことはありませんか？
この記事では、YouTubeの省略や強制非表示をCSSで無効化し、常に全文を表示させる方法を紹介します。Stylusなどのユーザースタイル拡張を使えば誰でも導入可能です。
背景
YouTubeのUIはレスポンシブ対応やデザイン簡略化のために、以下のような挙動をよくします。
- 長いチャンネル名を省略 (
text-overflow: ellipsis) - 動画タイトルを行数制限 (
-webkit-line-clamp) - 狭い画面幅で
display:noneやvisibility:hiddenを指定し強制的に非表示
これらは公式では回避できませんが、ユーザーCSSを当てることでコントロール可能です。
解決CSS
以下のCSSをStylusなどにインポートしてください。
（リポジトリから取得するのがおすすめですが、最低限の例を抜粋します）
/* チャンネル名の省略を解除 */
#owner #upload-info ytd-channel-name #text {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
max-height: none !important;
}
/* 動画タイトル（リッチグリッド等）の省略を解除 */
yt-formatted-string.style-scope.ytd-rich-grid-media {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
max-height: none !important;
}
フルバージョンは GitHub のリポジトリに公開しています。
→ youtube-unellipsis-style (GitHub)
機能概要
-
チャンネル名
- 省略記号を強制無効化、狭幅でも非表示にされない
-
動画タイトル
- ホーム/検索/リッチグリッド/再生ページで行数制限を解除
-
Shorts
- 再生ページやカードのチャンネル名を常に全文表示
-
強制非表示対抗
- 一定未満の画面幅で
display:noneにされる部分も再表示
- 一定未満の画面幅で
-
レイアウト調整
- Flexboxの
min-width:auto問題をmin-width:0で解消
- Flexboxの
-
Tooltip無効化
- hover時の冗長ツールチップを非表示
モード切替
<body> にクラスを付けることで挙動を切替できます。
-
ytcn-nowrap: 1行固定（横スクロールで表示） -
ytcn-wrap: 折返し許可（長文や英語混植でも改行） -
ytcn-anti-hide: 狭幅での強制非表示を上書き
例：
<body class="ytcn-wrap ytcn-anti-hide">
導入手順
- Chrome/Firefox に Stylus をインストール
- GitHub のリポジトリからCSSをインポート
- ページをリロードして動作確認
注意点
- YouTubeのDOMやクラスは頻繁に変更されるため、将来動かなくなる場合があります
- Tooltipを完全に消すとスクリーンリーダーでも読まれなくなるので、必要に応じて調整してください
- 実際のスマホでユーザーCSSを当てることは少ないので、このスタイルは主にデスクトップ環境や開発者向けアプリでの利用を想定しています
まとめ
YouTubeの「…」省略は小さなストレスですが、ユーザーCSSで自由にコントロール可能です。
気になる方はぜひ試してみてください。GitHubで公開しているのでフィードバックや改良も歓迎します。