web-dev-qa-db-ja.com

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

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

htmlcssoverflow
106
Gjr

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

Word-wrap: break-Word

プロパティ。

138
Amalgovinus

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

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

#myDiv {
    overflow:hidden;
}

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

65
inkedmn

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

39
Mara Jimenez

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

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

それが役に立てば幸い。

16
Timothée Martin

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

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 */
11
Pmpr

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

white-space : normal;

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

div {

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

}
10
Sachin

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

.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/

4
edward

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

3
bean

Cssで最小幅を設定するだけで、たとえば次のようになります。

.someClass{min-width: 980px;}

それは壊れませんが、それでもあなたはまだ対処するためのスクロールバーを持っています。

1
Damir Olejar

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

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

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: Ellipsis;
}
1
Ronit Oommen

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

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

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

0
Sir David of Lee
.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

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

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

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

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

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

たとえば、次のとおりです。

<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>
0
Gene