[解決済み] テキストが1行以上表示されないようにするには?
2022-03-27 16:21:15
質問
word-wrapなど、テキストの折り返しを止める属性はないのでしょうか? 高さがあり、かつ
overflow:hidden
で、テキストはまだ壊れています。
CSS3以前の、すべてのブラウザで動作する必要がある。
解決方法は?
div {
white-space: nowrap;
overflow: hidden;
}
<div>testing quite a lot of text that just doesn't wrap because it is too long a run-on sentance with so many useless words for you to not read today despite every effort you make to do so including stretching your browser width to the maximum length unless however you utilized your browser's zooming out feature or manually modifying the CSS in which case you are definitely cheating and ruining this fun little game of me typing out as many words as can be fitted into one ridiculously long run-on sentence of the twenty-first century anno domini using my traditional keyboard and two monitors at 1080p while going through every effort to painstakingly ramble on and on but just not exactly repeating myself short of reusing a couple of words in multiple places throughout this HTML even though that would be about a thousand times easier than what I'm currently doing on this day to pointlessly avoid work regardless of its futility given that it'll only create consequences for myself in having to work harder to catch up later of course all of that notwithstanding moderation efforts to tone back my extensive efforts to make this somewhat enjoyable to read while making it as long as possible who may or may not revert this edit in spite of its usefulness since the previous edit only contained four words that could not possibly wrap even without the CSS changes due to their short nature which is invariably going to create more questions than it answers such as can be found in the comments section which is exactly why I created this effort in order to address one of those about the purpose of the overflow attribute which if you have modified you will now see lets you read the entirety of this text through the benefits of horizontal scrolling features but on the other hand if only overflow was used and text-wrap was left out then you will continue to see a vertical scrollbar unless you set a fixed height for this div in which case you certainly should see that vertical overflow is hidden though that would only happen if you did not put this example into fullscreen short of having your viewport set to a small enough height which can actually be further defined to a designated number of lines as opposed to one by using a height set to a multiple of the CSS property defined by line-height which could be a percentage of white-space and that would indeed hide the vertical overflow of this mountain of text which I'm really quite surprised that you managed to linger on here to read through its frivolous nature on the famed site known by programmers as Stack Overflow and for that I congratulate you for potentially wasting your time</div>
注
これはブロック要素にのみ有効です。 テーブルセルにこれを行う必要がある場合(例)、テーブルセルの中に div を入れる必要があります。テーブルセルは display table-cell で block ではないからです。
CSS3では、テーブルセルにも対応しています。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] Linuxで特定のテキストを含むすべてのファイルを検索するにはどうすればよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] HTML5で(非空白の)自己閉鎖タグは有効ですか?
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] html要素間の改行を避ける [重複]。
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] HTML5で(非空白の)自己閉鎖タグは有効ですか?
-
[解決済み] localStorage、sessionStorage、session、cookieの違いは何ですか?
-
[解決済み】span要素の改行を防止する【重複あり