CSS spazio bianco nowrap non aumenta la larghezza?

Sto ricostruendo un menu a tendina simile a un <select> una casella con div e jquery. Il div che contiene il menu a discesa gli articoli devono avere una larghezza minima, ma no larghezza massima come si deve crescere insieme con la più ampia elemento della lista (quindi se ho molto lunga elemento come ‘[Questa è la più lunga elemento all’interno del contenitore]’, tutto il contenitore dovrebbe essere largo quanto questa voce.

Ora ho quasi avuto quello che voglio, utilizzando white-space:nowrap per ogni elemento all’interno del contenitore, in modo che il testo di un elemento non continuare su una nuova riga. Il problema è il testo scorre fuori della scatola, utilizzando, invece di lasciare che la casella di crescere lungo il testo. Io non riesco a capire come risolvere questo problema. Ho già provato text-overflow:ellipsis ma che sembra solo nascondere il sorvolato il testo e l’aggiunta di tre punti (…) alla fine.

Così qui è il mio problema in poche parole: come posso lasciare un div crescere insieme con il testo all’interno di esso, quando white-space:nowrap è applicata su di esso, invece di lasciare che il flusso di testo al di fuori di esso? Non voglio nascondere il testo utilizzando overflow:hidden, voglio mostrare l’intera stringa..

Grazie in anticipo!

InformationsquelleAutor carlo | 2010-10-25



3 Replies
  1. 19

    Elementi del blocco’ larghezze non dipendono dal loro contenuto in una normale CSS statica del modello di layout. È possibile ottenere ” shrink-a-fit’ comportamento come parte di altre proprietà di layout:

    • float: left
    • position: absolute
    • display: inline-block
    • tabella

    supponendo che non si esplicita width è impostato.

    • Grazie per la risposta. Il problema è che l’elemento contenitore è già impostato per “shrink-a-forma”, è per questo che non riesco a trovare una soluzione al mio problema.. devo trovare un modo per espandere l’elemento div, quando white-space:nowrap rende il flusso di testo, fuori dalla scatola, altrimenti non sembra funzionare perché l’elemento contenitore si restringe troppo e il sorvolato testo sarà nascosto..
    • Il metodo che stai usando per ottenere shrink-a-forma? Non funzionante esempio?
    • Per-il-punto utilità. Con voto positivo.
    • Io non capisco che cosa u significa tutto questo? E ‘ possibile avere un nowrap e larghezza automatica?
    • Con un elemento di blocco, no. Elementi del blocco sono dato una dimensione esplicita, e se la nowrap elemento all’interno è troppo grande, si sovrappone. Con un elemento in linea, sì. Inline elementi sono grandi come gli elementi che sono dentro di loro. Così l’elemento inline manterrà sempre più grande per ospitare il nowrap testo.
    • Aha’. Grazie per il consiglio. Sto lottando con una tabella td non volendo aumentare in larghezza ( con bootstrap )
    • si tratto per ospitare l’elemento interno e all <td> elementi sarà larga come il più grande elemento in colonna. Non c’è bisogno nowrap. Per impostare un iniziale (default) di larghezza, utilizzare i CSS. Se l’elemento di dati è troppo grande, questa larghezza si allungano ulteriormente. Per evitare che la colonna da essere allungata, utilizzare i CSS per impostare il testo a capo.

  2. 1

    Ho avuto un simile problema, è stato risolto specificando l’imbottitura valore in px invece di percentuale.

    • È improbabile che questo è un determinisic soluzione OP problema e tutti i problemi simili. Potresti postare il codice che dimostra questo? Questo sarebbe stato meglio, come un commento.
    • Se un elemento ha percentuale larghezze e altezze e le larghezze e le altezze dei genitori dipende dalla larghezza/altezza dei loro figli, questo può effettivamente essere la causa di questo strano spazio errori.
    • Non vedo come questa risposta cade in quella categoria.
  3. 1

    C’è un max-width impostato in qualsiasi di selezionare gli elementi padre?

    Questo sarebbe interrompere il bianco-proprietà dello spazio di lavoro. display: la tabella fa l’override di un max-width, se impostata tuttavia.

    • Sì che era il mio problema.

Lascia un commento