w td z table mam bardzo długie pojedyncze słowo „pneumonoultramicroscopicsilicovolcanoconiosis” i chcę, aby zmniejszyć szerokość table ale nie robić z tego powodu długiego słowa w jednym z td mogę przerwać to słowo dając <br />, ale czy istnieje jakiś sposób CSS, aby złamać to słowo w zależności od dostępnego miejsca. bez podawania linii przerwać lub edytować niczego w HTML.Jak złamać długie pojedyncze słowo w <td> przy użyciu CSS?
td span{display:block;width:your_max_width_here.px}
<td><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></td>
Spróbuj wykonać następujące czynności:
word-wrap: break-word;
white-space: normal;
word-wrap jest CSS3 (jednak to działa w IE). Możesz jednak nie być w stanie uruchomić go w starszych przeglądarkach.
Wierzę, że wsparcie dla 'word-wrap' idzie aż do IE5! –
@adam tak, to brzmi dobrze :) –
@BenRowe, należy dodać 'table {table-layout: fixed}'. Lub spróbuj tego: 'td {word-wrap: break-word; word-break: break-all} ' – hiway
Spróbuj wpisać następujący kod słowa break, jeśli nie ma wolnego miejsca.
word-wrap: break-word;
word-break: break-all;
następujące prace dla mnie:
word-wrap: break-word;
word-break: break-all;
white-space: normal;
następujący kod powinien działać;
td {word-break: break-all}
spróbować mojego kodu -
ze stołem ciała
table>tbody>tr>th{
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
Bez ciała Tabela
table>tr>th{
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
Próbowałem różnych kombinacji rozwiązań znaleźć tutaj oraz w inne strony, ale nigdy nie zadziałało zgodnie z oczekiwaniami - krótkie słowa w Rozdzielili się, nawet jeśli mieli miejsce na linii poniżej i wyglądało to głupio.
Wreszcie znalazłem ten kompromis:
table {
table-layout: fixed;
overflow-wrap: break-word;
word-wrap: break-word; /* IE */
}
Jeśli chcesz leczyć swoje wiersze jednakowo, to działa najlepiej.
Znalazłem, gdy mieszanka zawartości w komórce, niektóre długie pojedyncze słowa miesza się z innymi krótkimi słowami, że word-break: break-word; działa najlepiej. Jeśli to będzie możliwe, złamie się białe spacje. Chociaż wydaje się, że nie jest to obsługiwane w IE11. Jeśli ustawisz break-all na jedną z wymienionych właściwości, zawsze będzie się ona łamać w obrębie słowa (chyba, że ma to szczęście być na spacji).
+1 th za to rozwiązanie. czy jest jakakolwiek inna możliwość dzięki czystej tabeli CSS bcoz jest generowana automatycznie przez CMS, więc nie mogę dodać '' –
@ metal-gear-solid Więc najpierw zapełnij swoją wartość rozszerzeniem max-width w swoim źródle danych przed wyświetleniem go w html. –