Posso evitare che il testo in un blocco div trabocchi?

Question

È possibile impedire che il testo in un blocco div trabocchi?

Answer 1

si può provare:

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

#myDiv { 
    overflow:hidden; 
} 

Partenza the docs for the overflow property per ulteriori informazioni.

Answer 2

overflow: scroll? O auto. nell'attributo style.

Answer 3

Sì. È possibile utilizzare i CSS - Ci sono un sacco di valori che è possibile utilizzare ..

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

inkedmm è giusto, che potrebbe essere il comportamento desiderato, ma si dovrebbe determinare se questo è il caso.

Answer 4

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

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

Answer 5

È possibile controllare con i CSS, c'è un paio di opzioni:

• nascosti -> Tutti traboccante testo sarà nascosto.
• visible -> Lascia il testo traboccante visibile.
• di scorrimento -> Barre di scorrimento put se il testo supera

Speranza che aiuta.

Answer 6

Se il div ha un'altezza impostata in css che lo farà traboccare al di fuori del div.

È possibile assegnare al div un valore minimo se è necessario avere un'altezza minima sul div in ogni momento.

L'altezza minima non funziona in IE6, tuttavia, se si dispone di un foglio di stile specifico per IE6, è possibile assegnargli un'altezza regolare per IE6. Variazioni di altezza in IE6 in base al contenuto all'interno.

Answer 7

Se si desidera che il testo straripante nel div per Newline automaticamente invece di essere nascosto o fare una barra di scorrimento, utilizzare la proprietà

word-wrap: break-word

.

Answer 8

c'è un'altra proprietà CSS:

white-space : normal; 

I controlli proprietà white-space come il testo viene manipolato sull'elemento viene applicato a.

div { 

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

} 

Answer 9

È possibile utilizzare l'overflow di testo della proprietà CSS per troncare i 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 
} 

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

Answer 10

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

Answer 11

Prova ad aggiungere questa classe al fine di risolvere il problema:

.ellipsis { 
    text-overflow: ellipsis; 

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

spiegato più avanti in questo link http://css-tricks.com/almanac/properties/t/text-overflow/

Answer 12

Si può solo impostare il min-width nel CSS, ad esempio:

.someClass{min-width: 980px;} 

Non si romperà, tuttavia, si avrà ancora la barra di scorrimento da affrontare.

Answer 13

Raccomandazioni per come catturare quale parte del vostro CSS causa il problema:

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

2) Impostare style="border: 3px solid red;" su tutti gli elementi <div> per vedere quanto è vasta la superficie della casella <div> occupata.

3) Rimuovere tutte le proprietà css height:#px; dal CSS e ricominciare da capo.

Così, 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>