Kann ich verhindern, dass Text in einem Div-Block überläuft?

Question

Kann ich verhindern, dass Text in einem Div-Block überläuft?

Answer 1

können Sie versuchen:

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

#myDiv { 
    overflow:hidden; 
} 

prüfen, um weitere Informationen the docs for the overflow property.

Answer 2

overflow: scroll? Oder automatisch. im Attribut style.

Answer 3

Ja. Sie können CSS verwenden - Es gibt eine Reihe von Werten sind, können Sie verwenden ..

http://www.w3schools.com/Css/pr_pos_overflow.asp

inkedmm richtig ist, dass das Verhalten möchten Sie sein könnte, aber Sie sollten feststellen, ob dies der Fall ist.

Answer 4

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

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

Answer 5

Sie es mit CSS steuern kann, gibt es ein paar Optionen:

• versteckt -> Alle Texte überquell werden ausgeblendet.
• sichtbar -> Lassen Sie den Text übergelaufen sichtbar.
• scroll -> put Scrollbalken, wenn der Text überläuft

Hoffe, es hilft.

Answer 6

Wenn Ihr div eine eingestellte Höhe in css hat, wird es außerhalb des div überlaufen.

Sie könnten dem Div eine Min-Höhe geben, wenn Sie immer eine Mindesthöhe auf dem Div haben müssen.

Min-Höhe funktioniert nicht in IE6 obwohl, wenn Sie ein IE6-spezifisches Stylesheet haben, können Sie ihm eine normale Höhe für IE6 geben. Höhenänderungen in IE6 nach dem Inhalt innerhalb.

Answer 7

Wenn Sie die überquellenden Text in der div wollen Newline automatisch statt versteckt zu werden oder eine Scrollbar zu machen, verwenden Sie die

word-wrap: break-word

Eigenschaft.

Answer 8

gibt es eine weitere CSS-Eigenschaft:

white-space : normal; 

Die white-space-Eigenschaft steuert, wie der Text auf dem Element gehandhabt wird es angewendet wird.

Answer 9

Mit der CSS-Eigenschaft text-overflow können Sie lange Texte abschneiden.

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

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

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

Answer 10

einfach verwenden:

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

Answer 11

Versuchen Sie diese Klasse, um das Hinzufügen das Problem zu beheben:

.ellipsis { 
    text-overflow: ellipsis; 

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

weiter erklärt in diesem Link http://css-tricks.com/almanac/properties/t/text-overflow/

Answer 12

können Sie nur den min-width in der CSS gesetzt, zum Beispiel:

.someClass{min-width: 980px;} 

Es wird nicht brechen, doch müssen Sie noch die Scroll-Leiste zu behandeln.

Answer 13

Empfehlungen dafür, wie, welcher Teil Ihres CSS fangen das Problem verursacht:

1) gesetzt style="height:auto;" auf die all <div> Elemente und wieder wiederholen.

2) Stellen Sie style="border: 3px solid red;" auf all <div> Elemente, um zu sehen, wie weit eine Fläche <div> ‚s Box einnimmt.

3) Entfernen Sie alle css height:#px; Eigenschaften von Ihrem CSS und neu beginnen.

So zum Beispiel:

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