webentwicklung-frage-antwort-db.com.de

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

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

htmlcssoverflow
91
Gjr

Wenn Sie möchten, dass der überfließende Text im div automatisch neu ausgerichtet wird, anstatt ausgeblendet zu werden oder eine Bildlaufleiste zu erstellen, verwenden Sie die 

Word-wrap: break-Word 

eigentum.

127
Amalgovinus

Du kannst es versuchen:

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

#myDiv {
    overflow:hidden;
}

Check out die Dokumente für die Überlauf-Eigenschaft für weitere Informationen.

62
inkedmn

Sie können die CSS-Eigenschaft text-overflow verwenden, um lange Texte abzuschneiden.

<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

36
Mara Jimenez

Sie können es mit CSS steuern, es gibt einige Optionen:

  • hidden -> Der gesamte Text wird ausgeblendet.
  • visible -> Lassen Sie den Text überlaufen.
  • scroll -> setze Bildlaufleisten, wenn der Text überläuft

Ich hoffe es hilft.

15
Timothée Martin

es gibt noch eine andere CSS-Eigenschaft:

white-space : normal;

Die White-Space-Eigenschaft steuert, wie Text für das Element behandelt wird, auf das es angewendet wird. 

div {

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

}
10
Sachin

Verwenden Sie einfach folgendes: 

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

Fügen Sie diese Klasse hinzu, um das Problem zu beheben:

.Ellipsis {
  text-overflow: Ellipsis;

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

Weitere Informationen in diesem Link http://css-tricks.com/almanac/properties/t/text-overflow/

4
edward

overflow: scroll? Oder automatisch. im style-Attribut. 

3
bean

Sie können einfach die minimale Breite in der CSS einstellen, zum Beispiel:

.someClass{min-width: 980px;}

Es wird nicht kaputt gehen, trotzdem haben Sie noch die Bildlaufleiste, mit der Sie fertig werden müssen.

1
Damir Olejar

Ich denke, Sie sollten mit den Grundlagen von W3 beginnen

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

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: Ellipsis;
}
1
Ronit
.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

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

Wenn Ihr Div eine definierte Höhe in CSS hat, wird es außerhalb des Div überlaufen.

Sie können dem div eine Mindesthöhe geben, wenn Sie zu jedem Zeitpunkt eine minimale Höhe auf dem div haben müssen.

Min. Höhe funktioniert jedoch nicht im IE6. Wenn Sie ein IE6-spezifisches Stylesheet haben, können Sie dem IE6 eine normale Höhe zuweisen. Die Höhe ändert sich in IE6 entsprechend dem Inhalt.

0
Sir David of Lee

Empfehlungen, wie Sie feststellen können, welcher Teil Ihres CSS das Problem verursacht: 

1) Setzen Sie style="height:auto;" für alle <div> -Elemente und versuchen Sie es erneut. 

2) Stellen Sie style="border: 3px solid red;" für alle <div> -Elemente ein, um zu sehen, wie groß ein Bereich Ihrer <div>-Box ist. 

3) Nehmen Sie alle css height:#px; -Eigenschaften aus Ihrem CSS und beginnen Sie von vorne. 

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