CSS word wrapping in div

Question

Ho un div con una larghezza di 250 px. Quando il testo interiore è più ampio di quello, voglio che si rompa. Il div è mobile: a sinistra e ora ha un overflow. Voglio che la barra di scorrimento sparisca usando il word-wrapping. Come posso raggiungere questo obiettivo?

<div id="Treeview"> 
<div id="HandboekBox"> 
    <div id="HandboekTitel"> 
     <asp:Label ID="lblManual" runat="server"></asp:Label> 
    </div> 
    <div id="HandboekClose"> 
     <asp:ImageButton ID="btnCloseManual" runat="server" 
      ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" 
      BorderWidth="0" ToolTip="Sluit handboek" /> 
    </div> 
</div> 
<asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode"> 
    <Nodes> 

    </Nodes> 
</asp:TreeView> 
</div> 

CSS:

#Treeview 
{ 
padding-right: 5px; 
width: 250px; 
height: 100%; 
float: left; 
border-right: solid 1px black; 
overflow-x: scroll; 
} 

Answer 1

Come ha detto Andrew, il tuo testo dovrebbe fare proprio questo.

C'è un'istanza che posso pensare che si comporterà nel modo che suggerisci, e cioè se hai la proprietà di spazi bianchi impostata.

Vedi se non si ha il seguente nel CSS da qualche parte:

white-space: nowrap 

che causerà il testo di continuare sulla stessa linea fino a quando interrotta da un'interruzione di linea.

OK, mi scuso, non sono sicuro di averlo modificato o aggiunto il mark-up in seguito (non l'ho visto all'inizio).

La proprietà overflow-x è la causa della barra di scorrimento. Rimuovilo e il div si aggiusterà tanto quanto deve essere necessario per contenere tutto il tuo testo.

Answer 2

Sono un po 'sorpreso che non si limita a fare quello. Potrebbe esserci un altro elemento all'interno del div che ha una larghezza impostata su qualcosa di maggiore di 250?

Answer 3

Impostando solo le proprietà width e float css otterrebbe un pannello di wrapping. Il folowing esempio funzionano bene:

<div style="float:left; width: 250px"> 
Pellentesque feugiat tempor elit. Ut mollis lacinia quam. 
Sed pharetra, augue aliquam ornare vestibulum, metus massa 
laoreet tellus, eget iaculis lacus ipsum et diam. 
</div> 

Forse ci sono altri stili nel luogo che modificano l'aspetto?

Answer 4

E 'piuttosto difficile da dire definitivamente senza vedere ciò che il rendering HTML assomiglia e che stili vengono applicate agli elementi all'interno della div TreeView, ma la cosa che salta fuori a me subito è il

overflow-x: scroll; 

Cosa succede se lo rimuovi?

Answer 5

è possibile utilizzare:

overflow-x: auto; 

Se si imposta 'auto' in trabocco-x, comparirà scorrimento solo quando formato interno è più grande quella zona DIV

Answer 6

O semplicemente utilizzare

word-wrap: break-word; 

supportato in IE 5.5+, Firefox 3.5+ e browser WebKit come Chrome e Safari.

Answer 7

provare white-space:normal; Questo sovrascriverà ereditare white-space:nowrap;