divブロックのテキストがオーバーフローしないようにできますか？

divブロックのテキストがオーバーフローしないようにできますか？

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

word-wrap: break-word

プロパティ。

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

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

#myDiv {
    overflow:hidden;
}

詳細については、overflowプロパティのドキュメントをご覧ください。

CSSプロパティtext-overflowを使用して、長いテキストを切り捨てることができます。

<div id="greetings">
  Hello universe!
</div>

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

参照：http : //makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

CSSで制御できます。いくつかのオプションがあります。

• 非表示->オーバーフローしたテキストはすべて非表示になります。
• 表示->オーバーフローしたテキストを表示します。
• スクロール->テキストがオーバーフローした場合にスクロールバーを配置する

それが役に立てば幸い。

単にこれを使用してください：

white-space: pre-wrap;      /* CSS3 */   
white-space: -moz-pre-wrap; /* Firefox */    
white-space: -pre-wrap;     /* Opera <7 */   
white-space: -o-pre-wrap;   /* Opera 7 */    
word-wrap: break-word;      /* IE */

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

white-space : normal;

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

div {

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

}

問題を修正するためにこのクラスを追加してみてください：

.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/でさらに説明

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

私はあなたがw3の基本から始めるべきだと思います

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

divにcssで設定された高さがあり、divの外側にオーバーフローする場合。

常にdivの最小の高さにする必要がある場合は、divに高さを与えることができます。

ただし、Min-heightはIE6では機能しません。IE6固有のスタイルシートを使用している場合は、IE6に通常の高さを指定できます。内のコンテンツに応じてIE6で高さが変化します。

あなたはCSSで最小幅を設定することができます、例えば：

.someClass{min-width: 980px;}

壊れることはありませんが、それでも、スクロールバーを操作する必要があります。

CSSのどの部分が問題の原因であるかを把握する方法に関する推奨事項：

1）style="height:auto;"すべての<div>要素を設定し、再試行します。

2）style="border: 3px solid red;"すべての<div>要素を設定して、<div>ボックスが占める領域の幅を確認します。

3）height:#px;CSSからすべてのcss プロパティを削除して、最初からやり直します。

だから例えば：

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

!! 先にハードコードされた tradoff !! 周囲のコードと画面解像度によっては、これが異なる/望ましくない動作につながる可能性があります

非表示のオーバーフローが問題でなく、正しいハイフネーションが必要な場合は、単語/テキストを分割する場所にソフトハイフンHTMLエンティティを使用できます。このようにして、ブレークポイントを手動で事前に決定できます。

­

ハイフンは、単語がその周囲のコンテナーをオーバーフローしないように分割する必要がある場合にのみ表示されます。

例：

<div class="container">
  foo&shy;bar
</div>

コンテナーの幅が十分で、テキストがコンテナーからオーバーフローしない場合の結果：

foobar

コンテナーが小さすぎて、テキストが実際にコンテナーからオーバーフローする場合の結果：

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

詳細情報：https : //en.wikipedia.org/wiki/Soft_hyphen