i puntini di sospensione del testo non funzionano con la larghezza dinamica

sperare che qualcuno possa aiutare.i puntini di sospensione del testo non funzionano con la larghezza dinamica

Ho 3 div nidificati. Genitori, bambini e bambini.

Quello che voglio realizzare (il motivo non è rilevante) è che quel bambino ottiene una larghezza relativa a seconda della larghezza del genitore (una percentuale) ei figli dei bambini devono avere un'ellissi di trabocco a seconda della larghezza. Il problema è che se uso una% nella larghezza dei bambini i puntini di sospensione non funziona e se definisco la larghezza in pixel funziona.

Ecco il codice HTML

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     Here should go some text long enough to ellipsis the overflow 
     </div> 
    </div> 
</div>

Ecco il non lavorativo CSS

.a { 
     border:black 1px solid; 
     float: left; 
     width: 122px; 
     display: table; 
     line-height: 14px; 
    } 
    .b { 
     width:100%; 
     color: black; 
     font-size: 14px; 
     text-transform: uppercase; 
     cursor: pointer; 
    } 
    .c { 
     line-height: 11px; 
     width: 100%; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space:nowrap; 
    }

Tuttavia se cambio la larghezza di b per 122px funziona perfettamente (si noti che 122px dovrebbe essere pari al 100%).

È possibile controllare qui: http://jsfiddle.net/vNRpw/4/

Grazie!

fonte

2013-05-08 Dan Stern

inutili downvote. Se avessi aggiornato la risposta, tutti avrebbero saputo che era stato risolto, quindi nessuno avrebbe perso tempo. Questo mi darà il tempo di rispondere alla domanda. Inoltre, non posso contrassegnare la mia risposta come accettata dopo due giorni. Comunque, grazie per i suggerimenti –

display: table; nel primo div che causava problemi con l'ellissi. Se si elimina questo, i puntini di sospensione funzionano correttamente.

non lo vorrei cancellare la domanda può aiutare qualcuno

Controllare che funziona qui: http://jsfiddle.net/vNRpw/6/

fonte

2013-05-08 01:57:53

questa regola ha causato un sacco di problemi con i puntini di sospensione nel mio codice. All'inizio sembra che i puntini di sospensione funzionino, fino a quando ho ridimensionato il DIV. Prendendo visione: il tavolo funzionava perfettamente. Grazie! – Bildonia

Mine visualizza in una riga senza passare alla riga successiva del DIV http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge

Aggiungo i puntini di sospensione nel lato 'Input-group' di Bootstrap che ha' display: table'. Oltre a rimuovere 'display: table', in qualsiasi altro modo per risolvere questo? * Aggiornamento *: si trasforma in un'altra domanda: http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell –

Che dire qualcosa di simile:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.a { 
    border:black 1px solid; 
    float: left; 
    width: 50%; 
    line-height: 14px; 
} 
.b { 
    width:100%; 
    color: black; 
    font-size: 14px; 
    text-transform: uppercase; 
    cursor: pointer; 
} 
.c { 
    line-height: 11px; 
    width: 98%; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space:nowrap; 
} 

</style> 

</head> 
<body> 

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     Here should go some text long enough to ellipsis the overflow 
     </div> 
    </div> 
</div> 

</body> 
</html>

Il cambiamento principale è stato quello di mettere una larghezza leggermente inferiore al 100% su .c.

fonte

2013-05-08 01:53:31

Il mio rimane in una riga e mostra le ellissi. http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge

i puntini di sospensione del testo non funzionano con la larghezza dinamica

risposta

Problemi correlati