Prevenire il sovraccarico del testo all'interno del modale

Question

Ho un problema riguardante il modale quando i dati di una tabella contengono testi enormi che invaderanno all'esterno. Ho anche usato DataTable da here.

vedi immagine qui sotto:

so di poter spostare il testo lungo da nuovo ling utilizzando word-wrap:break-word; ma come posso aggiungere la classe? Esiste anche un modo per modificare le dimensioni modali?

codice che visualizza il modal:

responsive: { 
    details: { 
    display: $.fn.dataTable.Responsive.display.modal({ 
     header: function (row) { 
      var data = row.data(); 
      return 'Details for '+data['first_name']+' '+data['last_name']; 
     } 
    }), 
    renderer: $.fn.dataTable.Responsive.renderer.tableAll({ 
    tableClass: 'table' 
    }) 
    } 
    } 

violino here

Answer 1

Prova questa

.modal-body table 
{ 
    table-layout: fixed; 
} 

.modal-body table td 
{ 
    word-wrap:break-word 
} 

AGGIORNATO

aggiungo classe chiamata myDetailClass

$(document).ready(function() { 
$('#example').DataTable({ 
    responsive: { 
     details: { 
      display: $.fn.dataTable.Responsive.display.modal({ 
       header: function (row) { 
        var data = row.data(); 
        return 'Details for '+data[0]+' '+data[1]; 
       } 
      }), 
      renderer: $.fn.dataTable.Responsive.renderer.tableAll({ 
       tableClass: 'table myDetailClass' 
      }) 
     } 
    } 
    }); 
}); 

poi

.myDetailClass 
{ 
    table-layout: fixed; 
    word-wrap:break-word; 
} 

È anche possibile creare modali personalizzati. Il dettaglio è here

Answer 2

È possibile accedere alla voce selezionando il percorso nella mensa del modal generato come questo (secondo l'esempio simile sul DataTables website):

.modal-body > table > tbody > tr:last-child > td:last-child { 
    overflow-wrap: break-words; 
} 

Con break-words sarebbe mostrare i dati su più di una riga. Un'altra opzione sarebbe quella di nascondere semplicemente la parte debordante

.modal-body > table > tbody > tr:last-child > td:last-child { 
    overflow: hidden; 
} 

o fa accorciare e aggiungere un ... puntini di sospensione alla stringa automaticamente.

.modal-body > table > tbody > tr:last-child > td:last-child { 
    text-overflow: ellipsis; 
} 

per rendere il modal più ampia, è possibile selezionare per

.modal-dialog { 
    width: 90vw; 
} 

che rende il modello 90% della larghezza dello schermo e la centra.

aggiungere questi <style> s dopo l'importazione <link> per Bootstrap, in modo che non venga sovrascritto da quello stili importati.

---

Per giocare con le proprietà, andare al tavolo e aprire una modal. Quindi fai clic con il pulsante destro del mouse e (in Chrome/Chromium) seleziona Inspect.

È possibile modificare le proprietà di stile direttamente nel codice HTML live della vista Ispezione. Fai clic con il pulsante destro del mouse su un elemento nell'HTML e seleziona "Aggiungi attributo" per aggiungere l'attributo style e assegnagli lo stile che desideri testare.