Troncare la stringa in base alla larghezza del pixel

Question

Sto provando a inserire una stringa in un'area determinata (td) senza linea di interruzione. Il problema è: Ha bisogno di ...

• Fit durante il ridimensionamento
• Fit in N tipi di risoluzione
• Aggiungere ... alla fine, quando necessario (e non fare quando non necessario)
• accettare il cambiamento di font-size, font-weight, e font-family

---

Sulla base delle risposte su Novon's question, ho fatto il seguente codice:

CSS(// Basta aggiungere alcuni stili di rompere la linea)

.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 

jQuery(// Trova tutto td che contiene un elemento .truncated. Ottenere la larghezza reale (rimuovendo il contenuto e aggiungendolo di nuovo) di td. L'applicazione, se necessario, minWidth sulla td)

jQuery('.truncated').closest('td').each(function() { 
    var text = jQuery(this).text(); 
    var widthOriginal = jQuery(this).width(); 
    var widthEmpty = jQuery(this).text('').width(); 
    jQuery(this).text(text); 
    if(widthOriginal >= widthEmpty){ 
     var width = (parseInt(widthEmpty) - 10) + 'px'; 
     jQuery(this).css('maxWidth', width); 
     jQuery(this).text(text + '...'); 
    } 
}); 

il risultato (come previsto dal codice di cui sopra) è:

ma dovrebbe essere:

---

Stavo pensando, forse provare a trovare il primo line della stringa e rimuovere il resto ma non ho trovato un modo per farlo (ed è un sacco di "soluzione" per i miei gusti). C'è un modo migliore per farlo?

Answer 1

È possibile farlo con CSS puro, si veda questo link per riferimento:

line clampin

Aggiungi quelli al css:

.truncated { 
    display: -webkit-box; 
    -webkit-line-clamp: 1; // amount of line you want 
    -webkit-box-orient: vertical; 
} 

Oppure si può provare morsetto.js

https://github.com/josephschmitt/Clamp.js

Answer 2

Avvolgere il testo due volte per raggiungere questo:

<style type="text/css"> 

.relative_wrap { 
    height: 1em; 
    position: relative; 
} 

.absolute_wrap { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    top: 0px; 
    white-space: nowrap; 
} 

</style> 


<table> 
    <tbody> 
     <tr> 
      <td> 
       <div class="relative_wrap"> 
        <div class="absolute_wrap"> 
          LONG TEXT HERE 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Dal momento che si utilizza jQuery, è facile:

$('.truncated').wrap('<div class="relative_wrap"><div class="absolute_wrap"></div></div>'); 

Answer 3

Se si imposta layout del tavolo per fisso e la td overflow come hidden, è possibile anteporre un puntino di sospensione come virgola mobile div quando loLa larghezza di scorrimento di 0 è maggiore della larghezza del client.

Ecco il CSS, che include stili per evitare sanguinare-through sul tavolo:

table { 
    table-layout:fixed; 
    white-space:nowrap; 
    width:500px; 
    border-spacing: 0px; 
    border-collapse: separate;  
} 

td { 
    overflow:hidden; 
    border:1px solid #ddd; 
    padding:0px; 
} 

.hellip { 
    padding-left:0.2em; 
    float:right; 
    background:white; 
    position:relative; 
} 

jQuery:

$('td').each(function() { 
    if($(this)[0].scrollWidth > $(this).width()) { 
    $(this).prepend('<div class="hellip"">&hellip;</div>'); 
    } 
}); 

demo: http://jsfiddle.net/5h798ojf/3/

Answer 4

text-overflow: ellipsis 

sembra una soluzione CSS pura http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 5

singolo troncamento di testo della linea può essere raggiunto facilmente usando css text-overflow proprietà, che è supportato da tutti i principali browser, tra cui Internet Explorer a partire dalla versione 6.

Il fatto è che text-overflow da sola non fa molto. Definisce solo cosa succederà quando c'è il testo che trabocca dal contenitore. Quindi, per vedere i risultati, dobbiamo prima fare in modo che il testo esca, forzandolo su una singola riga. E 'anche importante per impostare la proprietà overflow del contenitore:

.truncated { 
    display: block; 
    white-space: nowrap; /* forces text to single line */ 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

esempio jsFiddle: https://jsfiddle.net/x95a4913/

documentazione text-overflow: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow