Od czasu przejścia z układu TABLE na układ DIV pozostaje jeden wspólny problem:
PROBLEM : wypełniasz swój DIV dynamicznym tekstem i nieuchronnie istnieje bardzo długie słowo, które wystaje poza krawędź kolumny div i sprawia, że Twoja witryna wygląda nieprofesjonalnie.
RETRO-WHINING : To nigdy się nie zdarzyło w przypadku układów stołowych. Komórka tabeli zawsze będzie ładnie rozszerzać się do szerokości najdłuższego słowa.
POWAŻNOŚĆ : Widzę ten problem nawet w większości dużych witryn, zwłaszcza w witrynach niemieckich, gdzie nawet popularne słowa, takie jak „ograniczenie prędkości”, są bardzo długie („Geschwindigkeitsbegrenzung”).
Czy ktoś ma na to praktyczne rozwiązanie?
Odpowiedzi:
Miękki łącznik
Możesz wskazać przeglądarkom, gdzie mają dzielić długie słowa, wstawiając miękki łącznik (
­
):mogą być renderowane jako
lub
Ładne wyrażenie regularne może zapewnić, że nie będziesz ich wstawiać, chyba że będzie to konieczne:
Przeglądarki i wyszukiwarki są na tyle inteligentne, aby ignorować ten znak podczas wyszukiwania tekstu, a Chrome i Firefox (nie testowały innych) ignorują go podczas kopiowania tekstu do schowka.
<wbr>
elementInną opcją jest wstrzyknięcie
<wbr>
, dawnego IE-izmu , który jest teraz w HTML5 :Przerwy bez łącznika:
To samo można osiągnąć za pomocą znaku spacji o zerowej szerokości
​
(lub​
).FYI jest też CSS
hyphens: auto
obsługiwany przez najnowsze IE, Firefox i Safari ( ale obecnie nie Chrome ):Jednak dzielenie wyrazów jest oparte na słowniku dzielenia wyrazów i nie ma gwarancji, że usunie długie słowa. Może jednak upiększyć wyjustowany tekst.
Rozwiązanie w stylu retro
<table>
bo układ jest zły, aledisplay:table
na innych elementach jest w porządku. Będzie tak dziwaczny (i rozciągliwy) jak oldschoolowe stoły:overflow
awhite-space: pre-wrap
odpowiedzi poniżej też są dobre.źródło
Dwie poprawki:
overflow:scroll
- zapewnia to, że treść jest widoczna kosztem projektu (paski przewijania są brzydkie)overflow:hidden
- po prostu odcina przelew. Oznacza to jednak, że ludzie nie mogą czytać treści.Jeśli (w przykładzie SO) chcesz, aby nie nakładał się na dopełnienie, prawdopodobnie będziesz musiał utworzyć inny element div wewnątrz wypełnienia, aby przechowywać zawartość.
Edycja: Jak podają inne odpowiedzi, istnieje wiele metod obcinania słów, takich jak wypracowanie szerokości renderowania po stronie klienta (nigdy nie próbuj robić tego po stronie serwera, ponieważ nigdy nie będzie działać niezawodnie, między platformami) JS i wstawianie znaków przerwania lub używanie niestandardowych i / lub szalenie niezgodnych tagów CSS (
word-wrap: break-word
nie działa w przeglądarce Firefox ).Jednak zawsze będziesz potrzebować deskryptora przepełnienia. Jeśli Twój div zawiera inny zbyt szeroki fragment treści typu blok (obraz, tabela itp.), Będziesz potrzebować przepełnienia, aby nie zniszczyć układu / projektu.
Więc zdecydowanie użyj innej metody (lub ich kombinacji), ale pamiętaj, aby dodać też przepełnienie, aby objąć wszystkie przeglądarki.
Edytuj 2 (aby rozwiązać swój komentarz poniżej):
Zacznij od użycia
overflow
właściwości CSS, która nie jest idealna, ale zapobiega niszczeniu projektów. Zastosujoverflow:hidden
najpierw. Pamiętaj, że przepełnienie może nie pęknąć na wyściółce, więc albo zagnieżdżaj się,div
albo użyj obramowania (cokolwiek będzie dla ciebie najlepsze).Pozwoli to ukryć przepełnioną zawartość, przez co możesz stracić znaczenie. Możesz użyć paska przewijania (używając
overflow:auto
luboverflow:scroll
zamiastoverflow:hidden
), ale w zależności od wymiarów elementu DIV i projektu może to nie wyglądać lub nie działać dobrze.Aby to naprawić, możemy użyć JS do wycofania rzeczy i wykonania jakiejś formy automatycznego obcięcia. Byłem w połowie pisania dla ciebie pseudokodu, ale w połowie staje się to bardzo skomplikowane. Jeśli chcesz pokazać jak najwięcej, spójrz na dzielnik ( jak wspomniano poniżej ).
Należy tylko pamiętać, że odbywa się to kosztem procesorów użytkownika. Może to spowodować długi czas ładowania i / lub zmiany rozmiaru stron.
źródło
overflow: scroll;
wypadek, gdyby treść zawierała przydatne informacje. A następnie następnym celem jest próba stworzenia takiego CSS, aby paski przewijania się nie pojawiały. A jeśli tak, zawsze masz paski przewijania jako zapasowe.text-overflow: ellipsis
stackoverflow.com/a/22811590/759452Jak wiemy, jest to złożony problem, który nie jest obsługiwany w żaden typowy sposób między przeglądarkami. Większość przeglądarek w ogóle nie obsługuje tej funkcji natywnie.
W niektórych pracach z e-mailami w formacie HTML, w których wykorzystywana była zawartość użytkownika, ale skrypt nie jest dostępny (a nawet CSS nie jest obsługiwany zbyt dobrze), następujący fragment kodu CSS w opakowaniu wokół nieprzestrzenionego bloku treści powinien przynajmniej nieco pomóc:
W przypadku przeglądarek opartych na Mozilli wspomniany wyżej plik XBL zawiera:
Niestety Opera 8+ nie wydaje się lubić żadnego z powyższych rozwiązań, więc JavaScript będzie musiał być rozwiązaniem dla tych przeglądarek (takich jak Mozilla / Firefox). Kolejne rozwiązanie dla różnych przeglądarek (JavaScript), które obejmuje późniejsze wersje Opery byłoby użyć skryptu Hedgera Wanga, który można znaleźć tutaj: http://www.hedgerwow.com/360/dhtml/css-word-break.html
Inne przydatne linki / przemyślenia:
Niespójna paplanina »Archiwum blogów» Emulowanie zawijania słów CSS dla Mozilli / Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
[OU] Brak zawijania słów w przeglądarce Opera, wyświetla się dobrze w IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- uzytkownicy / 2004-listopad / 024468.html
źródło
word-wrap: break-word;
właściwość CSS, więc jeśli nie potrzebujesz obsługi Firefoksa we wcześniejszych wersjach, możesz wyeliminować XBL.CSS Cross Browser Word Wrap
źródło
Użyj stylu
word-break:break-all;
. Wiem, że to działa na stołach.źródło
Czy masz na myśli to, że w przeglądarkach, które go obsługują,
word-wrap: break-word
nie działa?Jeśli jest uwzględniony w definicji treści arkusza stylów , powinien działać w całym dokumencie.
Jeśli przepełnienie nie jest dobrym rozwiązaniem, tylko niestandardowy skrypt javascript może sztucznie przerwać długie słowo.
Uwaga: istnieje również ten
<wbr>
znacznik podziału słów . To daje przeglądarce miejsce, w którym może podzielić ofertę. Niestety<wbr>
tag nie działa we wszystkich przeglądarkach, tylko w Firefoksie i Internet Explorerze (oraz w Operze ze sztuczką CSS).źródło
Właśnie sprawdziłem przeglądarkę IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows i Safari:
działa dla długich linków wewnątrz div z ustawioną szerokością i bez zadeklarowanego przepełnienia w css:
Nie widzę żadnych problemów z niekompatybilnością
źródło
Właśnie dowiedziałem się o łączniku z tego pytania . To może rozwiązać problem.
źródło
Po wielu walkach, to zadziałało dla mnie:
Działa w najnowszych wersjach Chrome, Firefox i Opera.
Zauważ, że wykluczyłem wiele
white-space
właściwości, które sugerowali inni - które faktycznie złamałypre
wcięcie dla mnie.źródło
Dla mnie na div bez stałego rozmiaru iz dynamiczną zawartością działał przy użyciu:
źródło
Ponownie użyj wyrażenia regularnego w tym komentarzu , to jest dobre, ale dodaje nieśmiały łącznik tylko między grupami 5 znaków niebędących białymi znakami lub łącznikami. Dzięki temu ostatnia grupa może być znacznie dłuższa niż zamierzona, ponieważ po niej nie ma pasującej grupy.
Na przykład to:
... powoduje to:
Oto wersja z pozytywnym wyprzedzeniem, aby uniknąć tego problemu:
... z tym wynikiem:
źródło
Rozwiązaniem, którego zwykle używam w przypadku tego problemu, jest ustawienie 2 różnych reguł css dla IE i innych przeglądarek:
działa doskonale w IE, ale zawijanie słów nie jest standardową właściwością CSS. Jest to właściwość specyficzna dla firmy Microsoft i nie działa w przeglądarce Firefox.
W przypadku przeglądarki Firefox najlepszą rzeczą do zrobienia przy użyciu tylko CSS jest ustawienie reguły
dla elementu zawierającego tekst, który chcesz zawinąć. Nie zawija tekstu, ale ukrywa część tekstu, która przekracza limit kontenera . Może to być miłe rozwiązanie, jeśli nie jest konieczne, aby wyświetlić cały tekst (np. Jeśli tekst znajduje się wewnątrz
<a>
tagu)źródło
Aktualizacja: Obsługa tego w CSS jest cudownie prosta i niewielka, ale nie masz kontroli nad tym, gdzie występują przerwy, kiedy się pojawiają. To dobrze, jeśli nie obchodzi Cię to lub Twoje dane mają długie przebiegi alfanumeryczne bez żadnych naturalnych przerw. Mieliśmy wiele długich ścieżek do plików, adresów URL i numerów telefonów, z których wszystkie mają miejsca, w których znacznie lepiej jest złamać niż inne.
Nasze rozwiązanie polegało na tym, że najpierw użyliśmy zamiany wyrażenia regularnego, aby wstawić spację o zerowej szerokości (& # 8203;) po każdych 15 (powiedzmy) znakach, które nie są białymi znakami lub jednym ze znaków specjalnych, w których wolelibyśmy przerwy. Następnie dokonujemy kolejnej zamiany, aby wstawić spację o zerowej szerokości po tych znakach specjalnych.
Przestrzenie o zerowej szerokości są fajne, ponieważ nigdy nie są widoczne na ekranie; nieśmiałe łączniki były mylące, gdy się pojawiały, ponieważ dane zawierają znaczące łączniki. Spacje o zerowej szerokości również nie są uwzględniane podczas kopiowania tekstu z przeglądarki.
Znaki specjalne, których obecnie używamy, to kropka, ukośnik, lewy ukośnik, przecinek, podkreślenie, @, | i łącznik. Nie sądzisz, że musisz robić cokolwiek, aby zachęcić do łamania myślników, ale Firefox (przynajmniej 3.6 i 4) nie dzieli się samoczynnie na myślniki otoczone liczbami (jak numery telefonów).
Chcieliśmy także kontrolować liczbę znaków między sztucznymi przerwami w oparciu o dostępną przestrzeń układu. Oznaczało to, że wyrażenie regularne pasujące do długich nieprzerwanych przebiegów musiało być dynamiczne. Jest to często wywoływane, a my nie chcieliśmy tworzyć w kółko tych samych identycznych wyrażeń regularnych ze względu na wydajność, więc użyliśmy prostej pamięci podręcznej wyrażeń regularnych, kluczowanej przez wyrażenie regex i jego flagi.
Oto kod; prawdopodobnie nazwałbyś funkcje w pakiecie narzędzi:
Testuj w ten sposób:
Aktualizacja 2: Wygląda na to, że w rzeczywistości są spacje o zerowej szerokości zawarte w kopiowanym tekście przynajmniej w niektórych okolicznościach, po prostu ich nie widać. Oczywiście zachęcanie ludzi do kopiowania tekstu z ukrytymi znakami jest zaproszeniem do wprowadzania takich danych do innych programów lub systemów, nawet własnych, gdzie może to powodować problemy. Na przykład, jeśli trafi do bazy danych, wyszukiwanie w niej może się nie powieść, a ciągi wyszukiwania takie jak ten prawdopodobnie również się nie powiodą. Używanie klawiszy strzałek do poruszania się po takich danych wymaga (słusznie) dodatkowego naciśnięcia klawisza, aby poruszać się po postaci, której nie widzisz, co jest nieco dziwne dla użytkowników, jeśli zauważą.
W systemie zamkniętym możesz odfiltrować ten znak na wejściu, aby się chronić, ale to nie pomaga innym programom i systemom.
Podsumowując, ta technika działa dobrze, ale nie jestem pewien, jaki byłby najlepszy wybór postaci powodującej przełom.
Aktualizacja 3: Umieszczenie tej postaci w danych nie jest już teoretyczną możliwością, jest to obserwowany problem. Użytkownicy przesyłają dane skopiowane z ekranu, są one zapisywane w bazie danych, przerwy w wyszukiwaniu, dziwne sortowanie itp.
Zrobiliśmy dwie rzeczy:
Działa to dobrze, podobnie jak sama technika, ale to przestroga.
Aktualizacja 4: Używamy tego w kontekście, w którym przekazywane dane mogą zawierać znaki ucieczki HTML. W odpowiednich okolicznościach może wstawić spacje o zerowej szerokości w środku jednostek HTML, z dziwacznymi wynikami.
Naprawiono dodanie znaku „&” do listy znaków, których nie łamiemy, na przykład:
źródło
if(domainName.length > 15) domainName.replace(/([^\\s]{5})(?=[^\\s])/g, '$1​');
Trzeba ustawić „table-layout: fixed”, aby zawijanie słów działało
źródło
AKTUALIZACJA: od grudnia 2011 r. Mamy teraz inną opcję, z pojawiającą się obsługą tych tagów w FF i Safari:
Wykonałem podstawowe testy i wydaje się, że działają one na najnowszej wersji Mobile Safari i Safari 5.1.1.
Tabela zgodności: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable
źródło
Aby zapewnić zgodność z IE 8+, użyj:
Zobacz to tutaj http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
Wszystko, co musiałem zrobić, to zastosować to do stylu kontenera div z ustawioną szerokością.
źródło
Użyj tego
źródło
Jeśli masz to -
po prostu przełącz się na format pionowy z elementami div i użyj min-width w swoim CSS zamiast width -
Oczywiście, jeśli wyświetlasz oryginalne dane tabelaryczne, możesz użyć prawdziwej tabeli, ponieważ jest ona semantycznie poprawna i będzie informować ludzi za pomocą czytników ekranu, które powinny znajdować się w tabeli. Używa ich do ogólnego układu lub cięcia obrazów, za które ludzie będą cię zlinczować.
źródło
Musiałem wykonać następujące czynności, ponieważ jeśli właściwości nie zostałyby zadeklarowane we właściwej kolejności, losowo łamałoby słowa w niewłaściwym miejscu i bez dodawania łącznika.
Pierwotnie opublikowane przez Enigmo: https://stackoverflow.com/a/14191114
źródło
Tak, jeśli to możliwe, ustawienie bezwzględnej szerokości i ustawienie
overflow : auto
działa dobrze.źródło
źródło
„Word-wrap: break-word” działa w przeglądarce Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/
źródło
Dodaj to do
css
swojego div:word-wrap: break-word;
źródło
po tym wszystkim, jak słowo zawija się i łamie, zachowaj przepełnienie i zobacz, czy to rozwiąże problem. po prostu zmień sposób wyświetlania div na:
display: inline;
źródło
Prosta funkcja (wymaga underscore.js) - oparta na odpowiedzi @porneL
źródło
Napisałem funkcję, która działa świetnie, gdy wstawia
­
x liter do słowa w celu dobrego łamania linii. Wszystkie odpowiedzi tutaj nie obsługują wszystkich przeglądarek i urządzeń, ale działa to dobrze w PHP:źródło