166

div ブロック内のテキストが CSS でオーバーフローしないようにするにはどうすればよいですか?

div {
  width: 150px;
  /* what to put here? */
}
<div>This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

4

15 に答える 15

190

div 内のオーバーフロー テキストを非表示にしたりスクロールバーを作成したりするのではなく、自動的に改行したい場合は、

word-wrap: break-word

財産。

于 2010-09-24T21:16:13.607 に答える
82

あなたが試すことができます：

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

詳細については、オーバーフロー プロパティのドキュメントを参照してください。

于 2009-07-22T14:04:09.530 に答える
46

簡潔な答え

単純に使用します：

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

長い答え

1.word-wrap

長い単語を分割して次の行に折り返すことができます。

可能な値:

  • normal: 許可されたブレーク ポイントでのみ単語を分割します
  • break-word: 改行できない単語を改行できます

div {
    width: 150px; 
    border: 2px solid #ff0000;
}

div.normal {
    word-wrap: normal;
}

div.break {
    word-wrap: break-word;
}
<h2>word-wrap: normal</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-wrap: break-word</h2>
<div class="break"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

2.white-space

要素内の空白の処理方法を指定します。

可能な値:

  • nowrap: テキストは次の行に折り返されません。
  • pre-wrap: 空白はブラウザによって保持されます。テキストは必要に応じて折り返され、改行されます

div {
    width: 150px;
    border: 2px solid #ff0000;
}

div.nowrap {
    white-space: nowrap;
}

div.pre-wrap {
    white-space: pre-wrap;
}
<h2>white-space: nowrap</h2>
<div class="nowrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

<h2>white-space: pre-wrap</h2>
<div class="pre-wrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

3.word-break

行末に達したときに単語をどのように分割するかを指定します。

可能な値:

  • normal: デフォルトの改行ルール。
  • break-word: オーバーフローを防ぐために、単語は任意のポイントで改行される場合があります。

div {
  width: 150px; 
  border: 2px solid #ff0000;
}

div.normal {
  word-break: normal;
}

div.break-word {
  word-break: break-word;
}
<h2>word-break: normal (default)</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-break: break-word</h2>
<div class="break-word"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

のブラウザ固有バージョンの場合はwhite-space、次を使用します。

white-space: pre-wrap;      /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap;     /* Opera <7 */
white-space: -o-pre-wrap;   /* Opera 7 */
于 2014-05-24T07:32:54.057 に答える
13

別のcssプロパティがあります：

white-space : normal;

空白プロパティは、テキストが適用される要素でのテキストの処理方法を制御します。

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}
于 2012-12-24T07:26:02.510 に答える
6

この問題を解決するには、次のクラスを追加してみてください。

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

このリンクでさらに説明されています http://css-tricks.com/almanac/properties/t/text-overflow/

于 2014-07-08T04:48:06.777 に答える
4

overflow: scroll? または自動。スタイル属性で。

于 2009-07-22T14:04:34.600 に答える
1

divの高さがcssに設定されている場合、divの外側にオーバーフローします。

常にdivの最小の高さにする必要がある場合は、divに最小の高さを指定できます。

最小の高さはIE6では機能しませんが、IE6固有のスタイルシートがある場合は、IE6の通常の高さにすることができます。IE6では、コンテンツに応じて高さが変化します。

于 2009-07-22T15:32:04.693 に答える
1 
.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>
于 2009-07-22T14:05:39.967 に答える
1

たとえば、CSS で最小幅を設定するだけです。

.someClass{min-width: 980px;}

壊れることはありませんが、スクロールバーを処理する必要があります。

于 2016-10-04T15:41:39.250 に答える