CSS: tronca le celle della tabella, ma si adatta il più ansible

Ti presento Fred. Lui è un tavolo:

Una cella ha più contenuto ed è più ampia, l'altra ha meno contenuti ed è più stretta

This cells has more content Less content here

L’appartamento di Fred ha una bizzarra abitudine di cambiare taglia, quindi ha imparato a hide alcuni dei suoi contenuti in modo da non spingere tutte le altre unità e spingere il salotto della signora Whitford nel dimenticatoio:

Le celle hanno ora le stesse dimensioni, ma solo una ha il suo contenuto troncato, e sembra che se l'altra cella avesse dato se qualche spazio bianco, avrebbero potuto entrambi adattarsi.

 
This cells has more content Less content here

Questo funziona, ma Fred ha la sensazione fastidiosa che se la sua cella di destra (che ha soprannominato Celldito) abbia lasciato un piccolo spazio, la sua cella di sinistra non sarebbe stata troncata più del tempo. Puoi salvare la sua sanità mentale?


    In breve: in che modo le celle di un tavolo possono fuoriuscire in modo uniforms e solo quando hanno rinunciato a tutti i loro spazi bianchi?

     
    This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content. Less content here.

    http://jsfiddle.net/7CURQ/

    Credo di avere una soluzione non javascript! Meglio tardi che mai, giusto? Dopotutto, questa è una domanda eccellente e Google ci sta provando. Non volevo accontentarmi di una correzione javascript perché trovo inaccettabile il leggero tremolio delle cose che si spostano dopo che la pagina è stata caricata.

    Caratteristiche :

    • Nessun javascript
    • Nessun layout fisso
    • Nessun trucchetto o trucchi di larghezza percentuale
    • Funziona con qualsiasi numero di colonne
    • Semplice generazione lato server e aggiornamento lato client (nessun calcolo necessario)
    • Compatibile con browser diversi

    Come funziona : all’interno della cella della tabella posiziona due copie del contenuto in due elementi diversi all’interno di un elemento contenitore relativamente posizionato. L’elemento spaziatore è posizionato staticamente e in quanto tale influenzerà la larghezza delle celle della tabella. Consentendo il contenuto della cella spaziatore di avvolgere possiamo ottenere la larghezza “migliore” delle celle della tabella che stiamo cercando. Questo ci permette anche di usare l’elemento posizionato in modo assoluto per limitare la larghezza del contenuto visibile a quella del genitore relativamente posizionato.

    Testato e funzionante in: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

    Immagini dei risultati :

    Belle larghezze proporzionaliBel ritaglio proporzionale

    JSFiddle : http://jsfiddle.net/zAeA2/

    Esempio HTML / CSS :

       
     
    .container { position: relative; } .content { position: absolute; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spacer { height: 0; overflow: hidden; }

    Ho affrontato la stessa sfida pochi giorni fa. Sembra che Lucifer Sam abbia trovato la soluzione migliore.

    Ma ho notato che dovresti duplicare il contenuto nell’elemento spaziatore. Ho pensato che non fosse così male, ma mi piacerebbe anche applicare il popup del title per il testo ritagliato. E significa che un lungo testo apparirà per la terza volta nel mio codice.

    Qui propongo di accedere all’attributo title da :after pseudo-element per generare spacer e mantenere pulito HTML.

    Funziona su IE8 +, FF, Chrome, Safari, Opera

     
    This cells has more content
    Less content here
     .ellipsis_cell > div { position: relative; overflow: hidden; height: 1em; } /* visible content */ .ellipsis_cell > div > span { display: block; position: absolute; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1em; } /* spacer content */ .ellipsis_cell > div:after { content: attr(title); overflow: hidden; height: 0; display: block; } 

    http://jsfiddle.net/feesler/HQU5J/

    Se Javascript è accettabile, ho messo insieme una procedura rapida che puoi usare come punto di partenza. Cerca dynamicmente di adattare le larghezze della cella utilizzando la larghezza interna di una span, in reazione agli eventi di ridimensionamento delle windows.

    Attualmente si presuppone che ciascuna cella ottenga normalmente il 50% della larghezza della riga e comprima la cella a destra per mantenere la cella di sinistra alla sua larghezza massima per evitare di traboccare. È ansible implementare una logica di bilanciamento della larghezza molto più complessa, a seconda dei casi d’uso. Spero che questo ti aiuti:

    Markup per la riga che ho usato per il test:

       Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Lorem ipsum dolor sit amet, consectetur adipiscing elit.   

    JQuery che collega l’evento di ridimensionamento:

     $(window).resize(function() { $('.row').each(function() { var row_width = $(this).width(); var cols = $(this).find('td'); var left = cols[0]; var lcell_width = $(left).width(); var lspan_width = $(left).find('span').width(); var right = cols[1]; var rcell_width = $(right).width(); var rspan_width = $(right).find('span').width(); if (lcell_width < lspan_width) { $(left).width(row_width - rcell_width); } else if (rcell_width > rspan_width) { $(left).width(row_width / 2); } }); }); 

    C’è una soluzione molto più semplice ed elegante.

    All’interno della cella della tabella che si desidera applicare il troncamento, includere semplicemente un contenitore div con il layout di tabella css: risolto. Questo contenitore occupa l’intera larghezza della cella della tabella padre, quindi agisce anche in modo reattivo.

    Assicurati di applicare il troncamento agli elementi nella tabella.

    Funziona da IE8 +

     

    I'm getting truncated because I'm way too long to fit

    I'm just text

    e css:

      .truncate { display: table; table-layout: fixed; width: 100%; } h1.truncated { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } 

    ecco un Fiddle funzionante https://jsfiddle.net/d0xhz8tb/

    Il problema è “table-layout: fixed” che crea colonne con larghezza fissa uniforms. Ma disabilitare questa proprietà css ucciderà l’overflow del testo perché la tabella diventerà il più grande ansible (e di quanto non si noti l’overflow).

    Mi dispiace ma in questo caso Fred non può avere la sua torta e mangiarla .. a meno che il proprietario non dia a Celldito meno spazio per lavorare, in primo luogo, Fred non può usare il suo ..

    Potresti provare a “pesare” determinate colonne, come questa:

     
    This cell has more content. Less content here.

    Puoi anche provare alcuni ritocchi più interessanti, come usare le colonne 0% -width e usare una combinazione della proprietà CSS white-space .

     
    This cell has more content. Less content here.

    Hai un’idea.

    Sì, direi che ne ha trenta, non c’è modo di farlo se non si usa un metodo js. Stai parlando di un complesso insieme di condizioni di rendering che dovrai definire. ad es. cosa succede quando entrambe le celle diventano troppo grandi per i loro appartamenti, dovrai decidere chi ha priorità o semplicemente dare loro una percentuale dell’area e se sono eccessivamente occupati entrambi occuperanno quell’area e solo se uno avrà spazi vuoti allunghi le gambe nell’altra cella, in entrambi i casi non c’è modo di farlo con i CSS. Anche se ci sono alcune cose abbastanza funky che le persone fanno con i css a cui non ho pensato. Dubito davvero che tu possa farlo anche tu.

    Come risposta samplebias, ancora una volta se Javascript è una risposta accettabile, ho creato un plugin jQuery appositamente per questo scopo: https://github.com/marcogrcr/jquery-tableoverflow

    Per usare il plugin basta digitare

     $('selector').tableoverflow(); 

    Esempio completo: http://jsfiddle.net/Cw7TD/3/embedded/result/

    modifiche:

    • Risolto il problema con jsfiddle per la compatibilità con IE.
    • Correzione in jsfiddle per una migliore compatibilità del browser (Chrome, Firefox, IE8 +).

    Usa alcuni css hack, sembra il display: table-column; può venire a salvare:

     
    A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.
    Less content

     .myTable { display: table; width: 100%; } .myTable:before { display: table-column; width: 100%; content: ''; } .flexibleCell { display: table-cell; max-width:1px; white-space: nowrap; text-overflow:ellipsis; overflow: hidden; } .staticCell { white-space: nowrap; } 

    JSFiddle: http://jsfiddle.net/blai/7u59asyp/

    Questa domanda si apre in alto in Google, quindi nel mio caso ho usato il frammento css da https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ ma applicarlo al td NON ha dato il risultato desiderato

    Ho dovuto aggiungere un tag div attorno al testo nel td e infine i puntini di sospensione hanno funzionato.

    Codice HTML abbreviato;

     
    Some Long Text Here

    CSS abbreviato;

     .truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 

    Controlla se “nowrap” risolve il problema in una certa misura. Nota: nowrap non è supportato in HTML5

     
    This cells has more content Less content here has more content

    puoi impostare la larghezza della cella a destra al minimo della larghezza richiesta, quindi applicare overflow-hidden + text-overflow all’interno della cella sinistra, ma Firefox è buggato qui …

    anche se, sembra, la flexbox può aiutare

    Ci sto lavorando di recente. Dai un’occhiata a questo test di jsFiddle , provalo tu stesso modificando la larghezza della tabella di base per verificare il comportamento).

    La soluzione è incorporare una tabella in un’altra:

     

     

    This cells has more content

    Less content here

    Fred ora è felice dell’espansione di Celldito?

    Non so se questo aiuterà qualcuno, ma ho risolto un problema simile specificando dimensioni di larghezza specifiche in percentuale per ogni colonna. Ovviamente, ciò funzionerebbe meglio se ogni colonna avesse un contenuto con larghezza che non varia troppo.

    Ho avuto lo stesso problema, ma avevo bisogno di visualizzare più righe (dove text-overflow: ellipsis; esito negativo). Lo risolvo usando una textarea all’interno di un TD e poi lo stile per comportarmi come una cella di tabella.

      textarea { margin: 0; padding: 0; width: 100%; border: none; resize: none; /* Remove blinking cursor (text caret) */ color: transparent; display: inline-block; text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */ &:focus { outline: none; } } 

    Aggiungi semplicemente le seguenti regole al tuo td :

     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; // These ones do the trick width: 100%; max-width: 0; 

    Esempio:

     table { width: 100% } td { white-space: nowrap; } .td-truncate { overflow: hidden; text-overflow: ellipsis; width: 100%; max-width: 0; } 
     
    content long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt other content

    Dato che ‘table-layout: fixed’ è il requisito di layout essenziale, questo crea colonne non regolabili uniformsmente distanziate, ma è necessario creare celle di diverse larghezze percentuali, magari impostare il ‘colspan’ delle celle su un multiplo?

    Ad esempio, utilizzando una larghezza totale di 100 per calcoli percentuali semplici e dicendo che è necessaria una cella dell’80% e un’altra del 20%, considerare:

     
    text across entire width of table
    text in lefthand bigger cell text in righthand smaller cell

    Ovviamente, per colonne dell’80% e del 20%, è ansible impostare il colspan delle celle con larghezza del 100% su 5, l’80% su 4 e il 20% su 1.