オーバーフローや折り返しを発生させずに、等幅テキストを可能な限り大きくします

コンテナー内で等幅テキストを可能な限り広くする方法を探しています。コンテナーのオーバーフローまたはブレークが発生します。私はすでに CSS3オーバーフローなしで要素を埋めるためにテキストをできるだけ大きくするを見て、提案されたソリューションを実装しようとしましたが、私の場合は機能しないようです。リンクされた質問への回答で提案されているように、フォントサイズを3vwではなく7vwに設定すると、フォントサイズは近いように見えますが、行の長さまたはページの幅を変更すると、再びオフです。

これが私のコードです：

https://jsfiddle.net/de7qbu19/ （フィドルのコードは同じです）

#song-container {
    text-align: center;
    margin: 20px;
}
#song {
    color: #000;
    font: normal 3vw Courier New,monospace,Courier;
    white-space: pre;
    Word-break: break-all;
    text-align: left;
    display: inline-block;
}

#song > span { /* Chords*/
    color: #007fbf;
    cursor: pointer;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            
<div class="container-fluid">
    <div id="song-container">
        <div class="panel panel-default">
            <div class="panel-body">
                <span id="song">
[Placeholder]

<span>Em</span>         <span>G</span>
Placeholder Placeholder Placeholder Placeholder
<span>D</span>          <span>C</span>
Placeholder Placeholder Placeholder Placeholder
                </span>
            </div>
        </div>
    </div>
</div>

スニペットを実行すると、幅全体がほとんどかかるようです：しかし、次にFull pageオプションをクリックすると、特にウィンドウサイズを小さくすると、信頼性が低く、信頼できないことが明らかになります。

したがって、vw単位を使用してフォントサイズを設定しても、私にはうまくいかないようです。

これを適切に達成する方法はありますか？

javascripthtmlcssfont-sizemonospace

2020/04/26Forivin

応答性を向上させるいくつかのことはこれです：

#song-container{
 text-align: center;
 margin:0;
overflow: hidden;
}

.panel-body{
 margin: 0;
}

オーバーフローをスクロール可能にしたい場合は、overflow-x: scroll;また、私のアプローチでも画面が220pxしかない場合、フォントの呼び出し速度が遅いために一部の単語がカットされるため、応答性を高めるメディアクエリを使用すると、メディアクエリを変更して、このポイントに達した後、フォントをコンテナ内に維持するためにフォントをより速くスケーリングできます。お役に立てれば！

編集：

  #song-container {
    text-align: center;
    /*margin: 20px;*/
    padding: 1%;
}
#song {
    color: #000;
    font: normal 3vw Courier New,monospace,Courier;
    white-space: pre;
    Word-break: break-all;
    text-align: left;
    display: inline-block;
}

#song > span { /* Chords*/
    color: #007fbf;
    cursor: pointer;
}
.panel-body{
  padding:0;
}

これでうまくいくはずです。フィドルで編集します。

2020/05/04Mixael Contreras