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

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

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

word-wrap: break-word

Eigentum.

Du kannst es versuchen:

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

#myDiv {
    overflow:hidden;
}

Weitere Informationen finden Sie in den Dokumenten zur Überlaufeigenschaft .

Sie können den Textüberlauf der CSS-Eigenschaft 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

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

• versteckt -> Der gesamte Textüberlauf wird ausgeblendet.
• sichtbar -> Lassen Sie den überfließenden Text sichtbar werden.
• scrollen -> Bildlaufleisten setzen, wenn der Text überläuft

Ich hoffe es hilft.

Verwenden Sie einfach dies:

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

Es gibt noch eine andere CSS-Eigenschaft:

white-space : normal;

Die Leerraum-Eigenschaft steuert, wie Text auf das Element angewendet wird, auf das er angewendet wird.

div {

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

}

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

.ellipsis {
  text-overflow: ellipsis;

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

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

overflow: scroll? Oder automatisch. im Stilattribut.

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

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

Sie können dem Div eine Mindesthöhe geben, wenn Sie immer eine Mindesthöhe auf dem Div haben müssen.

Die Mindesthöhe funktioniert in IE6 jedoch nicht. Wenn Sie ein IE6-spezifisches Stylesheet haben, können Sie ihm eine reguläre Höhe für IE6 zuweisen. Die Höhe ändert sich im IE6 je nach Inhalt.

Sie können einfach die Mindestbreite im CSS festlegen, zum Beispiel:

.someClass{min-width: 980px;}

Es wird nicht kaputt gehen, trotzdem haben Sie immer noch die Bildlaufleiste, mit der Sie sich befassen müssen.

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

1) style="height:auto;"auf alle einstellen<div> Elemente und erneut versuchen.

2) Stellen Sie style="border: 3px solid red;"alle <div>Elemente ein, um zu sehen, wie breit ein Bereich ist, den Ihre <div>Box einnimmt .

3) Entfernen Sie alle height:#px;CSS-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>

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

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

!! Hart codiert tradoff voraus !! Abhängig vom umgebenden Code und der Bildschirmauflösung kann dies zu unterschiedlichem / unerwünschtem Verhalten führen

Wenn ein versteckter Überlauf nicht in Frage kommt und eine korrekte Silbentrennung erforderlich ist, können Sie die HTML-Entität mit weichem Bindestrich verwenden, bei der das Wort / der Text unterbrochen werden soll. Auf diese Weise können Sie eine Sollbruchstelle manuell vorgeben.

­

Der Bindestrich wird nur angezeigt, wenn das Wort unterbrochen werden muss, damit der umgebende Container nicht überläuft.

Beispiel:

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

Ergebnis, wenn der Container breit genug ist und der Text den Container nicht überlaufen würde:

foobar

Ergebnis, wenn der Container zu klein ist und der Text den Container tatsächlich überlaufen würde:

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>

Weitere Informationen: https://en.wikipedia.org/wiki/Soft_hyphen