Jak można zawijać tekst, aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
który przekracza szerokość div
(powiedzmy 200px
)?
Jestem otwarty na wszelkiego rodzaju rozwiązania, takie jak CSS, jQuery itp.
Spróbuj tego:
div {
width: 200px;
word-wrap: break-word;
}
word-break: break-all;
wtedy w normalnym tekście, łamie słowa na środku, co jest brzydkie ... Czy nie możemy mieszać obu zachowań?word-break: break-all
i nieword-wrap: break-all
. Łatwy do popełnienia błądNa bootstrap 3 upewnij się, że białe znaki nie są ustawione jako „nowrap”.
źródło
white-space: normal;
też potrzebowałem, zanim zadziałało.Możesz użyć miękkiego łącznika w następujący sposób:
aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa
Będzie to wyglądać jak
jeśli pole zawierające nie jest wystarczająco duże lub
Jeśli to jest.
źródło
­
?aaaaaa...aaaaa
sięa­a­a­a­a­a­a...a­a­a­a
?The „
word-wrap
rozwiązanie” działa tylko w IE i przeglądarek wspieraCSS3
.Najlepszym rozwiązaniem dla różnych przeglądarek jest użycie języka po stronie serwera (php lub cokolwiek innego) do zlokalizowania długich ciągów znaków i umieszczenia w nich w regularnych odstępach czasu jednostki html.
​
Ta encja ładnie łamie długie słowa i działa na wszystkich przeglądarkach.na przykład
źródło
Jedyny, który działa w IE, Firefox, Chrome, Safari i operze, jeśli w słowie nie ma spacji (takich jak długi adres URL), to:
Stwierdziłem, że jest to kuloodporne.
źródło
To zadziałało dla mnie
źródło
Inną opcją jest również użycie:
Spowoduje to ustawienie wszystkich elementów div we wszystkich przeglądarkach, które obsługują CSS1 (czyli prawie wszystkie popularne przeglądarki już w IE 8)
źródło
<pre>
element, który chcesz zawijać słowa, to działaword-break
lubword-wrap
nie.Cross Browser
źródło
Dodaj ten CSS do akapitu.
źródło
text-overflow:ellipsis
tak jak następnego faceta, ale to nie jest poprawna odpowiedź na to pytanie. Chce zawinąć słowo, a nie obciąć przepełnienie.Przykład z trików CSS :
Więcej przykładów tutaj .
źródło
Dla mnie rozwiązaniem po stronie serwera jest:
$message = wordwrap($message, 50, "<br>", true);
gdzie$message
jest zmienna łańcuchowa zawierająca słowo / znaki do rozbicia. 50 to maksymalna długość dowolnego segmentu i"<br>"
tekst, który chcesz wstawić co (50) znaków.źródło
Spróbuj tego
właściwość text-overflow: ellipsis add ... i linia-zacisk pokazują liczbę linii.
źródło
W treści HTML spróbuj:
W treści CSS spróbuj:
źródło
Spróbuj tego
źródło
Użyłem bootstrapu. Mój kod HTML wygląda jak ...
CSS
źródło
text-justify
klasę, więc możesz go używać zamiast.wrap-text
możesz użyć tego CSS
źródło
próbować:
źródło
Użyj
word-wrap:break-word
atrybutu wraz z wymaganą szerokością. Głównie wstaw szerokość w pikselach, a nie w procentach.źródło