Posso impedire l'overflow del testo in un blocco div?

Posso impedire l'overflow del testo in un blocco div?

Se vuoi che il testo traboccante nel div si sposti automaticamente anziché essere nascosto o creare una barra di scorrimento, usa il tasto

word-wrap: break-word

proprietà.

Puoi provare:

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

#myDiv {
    overflow:hidden;
}

Consulta i documenti per la proprietà di overflow per ulteriori informazioni.

È possibile utilizzare la proprietà CSS overflow del testo per troncare testi lunghi.

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

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

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

Puoi controllarlo con CSS, ci sono alcune opzioni:

• nascosto -> Tutto il testo traboccante verrà nascosto.
• visibile -> Lascia che il testo straripa visibile.
• scroll -> inserisci le barre di scorrimento se il testo trabocca

Spero che sia d'aiuto.

Basta usare questo:

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

c'è un'altra proprietà css:

white-space : normal;

La proprietà dello spazio bianco controlla come viene gestito il testo sull'elemento a cui è applicato.

div {

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

}

Prova ad aggiungere questa classe per risolvere il problema:

.ellipsis {
  text-overflow: ellipsis;

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

Spiegato ulteriormente in questo link http://css-tricks.com/almanac/properties/t/text-overflow/

overflow: scroll? O auto. nell'attributo di stile.

Immagino che dovresti iniziare con le basi di w3

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

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

Se il tuo div ha un'altezza impostata in css, ciò causerà un trabocco al di fuori del div.

Potresti dare al div un'altezza minima se hai bisogno di avere un'altezza minima sul div in ogni momento.

L'altezza minima non funzionerà in IE6, tuttavia, se hai un foglio di stile specifico per IE6, puoi assegnargli un'altezza regolare per IE6. L'altezza cambia in IE6 in base al contenuto all'interno.

Puoi semplicemente impostare la larghezza minima nel CSS, ad esempio:

.someClass{min-width: 980px;}

Non si romperà, tuttavia avrai comunque a disposizione la barra di scorrimento.

Consigli su come individuare la parte del CSS che causa il problema:

1) impostare style="height:auto;"su tutti gli <div>elementi e riprovare.

2) Imposta style="border: 3px solid red;"su tutti gli <div>elementi per vedere l'ampiezza di un'area occupata dal tuo <div>box.

3) Rimuovi tutte le height:#px;proprietà CSS dal tuo CSS e ricomincia.

Quindi per esempio:

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

!! Difficoltà codificata anticipata !! A seconda del codice circostante e della risoluzione dello schermo, ciò potrebbe comportare comportamenti diversi / indesiderati

Se l'overflow nascosto è fuori discussione ed è necessaria la sillabazione corretta, è possibile utilizzare l'entità HTML del trattino morbido in cui si desidera interrompere la parola / testo. In questo modo è possibile predeterminare manualmente un punto di rottura.

­

Il trattino apparirà solo quando la parola deve spezzarsi per non traboccare il suo contenitore circostante.

Esempio:

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

Risultato se il contenitore è abbastanza largo e il testo non trabocca nel contenitore:

foobar

Risultato se il contenitore è troppo piccolo e il testo effettivamente trabocca nel contenitore:

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>

Ulteriori informazioni: https://en.wikipedia.org/wiki/Soft_hyphen