Θέλω να χρησιμοποιήσω το CSS text-overflow
σε ένα κελί πίνακα, έτσι ώστε αν το κείμενο είναι πολύ μεγάλο για να χωρέσει σε μία γραμμή, να αποκόπτεται με μια έλλειψη αντί να τυλίγεται σε πολλές γραμμές. Είναι αυτό δυνατό;
Δοκίμασα αυτό:
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Αλλά το white-space: nowrap
φαίνεται να κάνει το κείμενο (και το κελί του) να επεκτείνεται συνεχώς προς τα δεξιά, ωθώντας το συνολικό πλάτος του πίνακα πέρα από το πλάτος του περιέκτη του. Χωρίς αυτό, ωστόσο, το κείμενο συνεχίζει να τυλίγεται σε πολλαπλές γραμμές όταν φτάνει στην άκρη του κελιού.
Για να κόψετε κείμενο με έλλειψη όταν αυτό ξεπερνά ένα κελί πίνακα, θα πρέπει να ορίσετε την ιδιότητα CSS max-width
σε κάθε κλάση td
για να λειτουργήσει η υπερχείλιση. Δεν απαιτούνται επιπλέον div's διάταξης
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Για responsive διατάξεις, χρησιμοποιήστε την ιδιότητα CSS max-width
για να καθορίσετε το πραγματικό ελάχιστο πλάτος της στήλης, ή απλά χρησιμοποιήστε max-width: 0;
για απεριόριστη ευελιξία. Επίσης, ο πίνακας που περιέχει θα χρειαστεί ένα συγκεκριμένο πλάτος, συνήθως width: 100%;
, και οι στήλες θα έχουν συνήθως το πλάτος τους ορισμένο ως ποσοστό του συνολικού πλάτους
table {
width: 100%;
}
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.columnA {
width: 30%;
}
td.columnB {
width: 70%;
}
Ιστορικά: Για τον IE 9 (ή λιγότερο) θα πρέπει να έχετε αυτό στην HTML σας, για να διορθώσετε ένα συγκεκριμένο πρόβλημα απόδοσης του IE
<!--[if IE]>
<style>
table {
table-layout: fixed;
width: 100px;
}
</style>
<![endif]-->
***Γιατί συμβαίνει αυτό;
Φαίνεται ότι αυτή η ενότητα στο w3.org υποδηλώνει ότι η υπερχείλιση κειμένου ισχύει μόνο για στοιχεία μπλοκ: