Mam taki kod służący do łamania długich linii tekstu, tak, aby <div> się nie rozjeżdzał:
@mixin break-word() {
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Działa bardzo dobrze na Chrome, ale nie na IE oraz Firefox, na którym działa to zbyt "ambitnie". Tzn. łamie wyrazy w miejscach gdy nie jest to potrzebne:
Jak można rozwiązać ten problem?
Moze tak:
word-break: break-word;
word-wrap: break-word;
Tak, ale w przypadku gdy ktoś napisze dłuuuuugą linię (aaaaaaaaaaaaaaaaa itd) to break-word nie zadziała, bo on (firefox) po takim ustawieniu rozbija linię w oparciu o słowa. Czyli użycie długiego wyrazu (albo URL) spowoduje, że layout się rozwali.
a zoba overflow-wrap na mozilli
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
Niestety nie zadziała to dobrze. Nie pomoże to w sytuacji gdy ktoś wklei bardzo długi wyraz. Wtedy Firefox nie połamie takiej linii i wyraz "wyjdzie" poza <div>.
@Adam Boduch: nie wystarczyło by dodać max-width: 100% żeby wyraz nie wychodził poza diva?
Ustawienie szerokości kontenera nic tu nie daje. Szerokość będzie zachowana, ale tekst będzie wychodził poza <div>: https://jsfiddle.net/q56ebvto/
Chodziło mi o dorzucenie max-width mając już break-wordy, tak jak tu: https://jsfiddle.net/q56ebvto/2/
na firefoxie wygląda ok
Hmm, nie wiem czemu to nie działa:
Na Chrome jest ok. Do przetestowania tutaj: https://dev.4programmers.info/Mikroblogi
Działa tylko wtedy gdy zdefiniuje szerokość w px.
@Adam Boduch: takie coś mi zadziałało, ale nie testowałem, czy nie psuje innych przeglądarek.
Dodane style do tego, co jest obecnie:
.microblog-text {
display: table;
overflow-wrap: break-word;
table-layout: fixed;
width: 100%;
}
Dzięki @Marooned. Sprawdziłem na Chrome oraz FF i wygląda dobrze :)