Jak zawijać tekst bez spacji wewnątrz <td>?

Użyłem:

word-break:break-all;
table-layout:fixed;

a tekst zawija się w przeglądarce Chrome, ale nie w przeglądarce Firefox.

Aktualizacja: postanowiłem zmienić projekt, aby nie potrzebował opaski; próba rozwiązania poprawki / włamania do CSS okazała się zbyt frustrująca i czasochłonna.

Spróbuj tego, myślę, że zadziała w przypadku czegoś takiego jak „AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG”

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Wziąłem swój przykład z kilku różnych witryn w Google. Przetestowałem to na ff 5.0, IE 8.0 i Chrome 10.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Użyj CSS3 word-wrap: break-word;. Działa również w przeglądarkach opartych na WebKit (Safari, Chrome).

Aktualizacja : zapomniałem, że przedmiotowy element musi być jednak pośrednio lub jawnie umieszczony jako element stały lub wyświetlany jako element blokowy. W przypadku komórek tabeli ( td) użyj display: inline-block;.

Oto zaawansowana wersja tego, o co prosił OP.

Czasami zdarza się, że nasz klient chce, abyśmy podawali znak „-” po zakończeniu słowa na końcu wiersza.

Lubić

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

przerwa do

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Tak więc istnieje nowa właściwość CSS, jeśli jest obsługiwana, zwykle obsługiwana w najnowszych przeglądarkach.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Używam tego.

Mam nadzieję, że ktoś będzie miał takie żądanie.

W przypadku automatycznego układu tabeli spróbuj stylizować dane td, łącząc atrybuty max-width i word-wrap.

Na przykład: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Testowane w przeglądarkach Firefox 32, Chrome 37 i IE11.

Możesz ręcznie wprowadzić spacje o zerowej szerokości (& # 8203;), aby utworzyć punkty przerwania.

Ustaw szerokość kolumny dla tdtagu.

Myślę, że jest to długotrwały problem w Firefoksie, który nawiązuje do Mozilli i Netscape. Założę się, że masz problem z wyświetlaniem długich adresów URL. Myślę, że jest to raczej problem z silnikiem renderowania niż coś, co można naprawić za pomocą CSS, bez brzydkich hacków.

Zmiana projektu ma sens.

Wyglądało to jednak na dobre: http://hacks.mozilla.org/2009/06/word-wrap/

Używam Angulara do mojego projektu i udało mi się rozwiązać ten problem za pomocą prostego filtra:

Szablon:

<td>{{string | wordBreak}}</td>

Filtr:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

Nie możesz tego zobaczyć, ale po $1tym jest niewidoczna spacja (dzięki @kingjeffrey za wskazówkę), która włączyła podziały słów w komórkach tabeli.

Jednym z nieco hakerskich sposobów jest przetworzenie tekstu w celu dodania spacji między każdą literą. Zastąp spacje wartością  Następnie użyj atrybutu CSS odstępów między literami, aby zmniejszyć spacje.

Wiem, to hack ... ale jeśli NIC innego nie działa, powinno się owinąć bez problemu.