Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS]Przełamywanie ciągłego tekstu
Forum PHP.pl > Forum > Przedszkole
drzalek
Witam,
Mam takie problem:

Wyświetlam sobie na stronie tekst wpisany przez użytkownika. Tekst znajduje sie w div'ie o określonej szerokości np 200px. Problem w tym, że jeżeli użytkownik wpisze jakiś długi ciągły tekst np: ToJestMójTekstBlaBlaBlaBla, to tekst ten się nie przełamuje, tylko wyłazi poza diva.

Próbowałem przełamać tekst przy pomocy php i funkcji wordwrap, po każdym 21 znaku w danej linii wstawiam spację. Byłoby ok, ale jeśli użytkownik wprowadzi tekst poprawnie wówczas jemu też przełamie po 21 znaku i niepotrzebnie przetnie wyraz na pół jeżeli akurat w tym miejscu wypadnie np środek wyrazu, poza tym jeśli korzysta z innej przeglądarki, lub systemu operacyjnego, to wielkość czcionki się zmienia i dla większej czcionki nie będzie to już 21 znak, a np 18 (dla przykładu IE7 w xp po 21 znaku, a IE7 w viście po 18), nie mówiąc już o zmianie wielkości czcionki przez użytownika.

Szukałem już tego w różnych miejscach, tu na forum też, ale żadne rozwiązanie nie jest wystarczająco dobre.

W css ustawienie max-width: 200px; w ogóle nie daje rezultatu.

Wiem, że mogłoby pomóc umieszczenie tabelki zamiast divów (choć pewności nie mam bo nie sprawdzałem), ale tabelki chciałbym i tak uniknąć.

Jak ktoś ma jakiś pomysł to proszę o pomoc smile.gif
ayeo
Niestety nie da się tego zrobić w HTML i CSS. Jedyna opcja to sztuczne łamanie w PHP. Możesz poprawić Twoją funkcję, żeby łamała tylko wyrazy dłuższe niż 21 znaków. Do do wielkości czcionki to nic sprytnego z tym nie zrobisz w sumie.

Pozdrawiam
drzalek
Tak też myślałem, bo chyba cały net za tym przekopałem, dzięki wielkie smile.gif
barthpl
Rozwiązanie trochę nie estetyczne, ale gwarantujące utrzymanie layout'u w ryzach i zarazem bardzo szybkie, to dodanie paska przewijania: overflow-x: auto;. Można też próbować w js napisać skrypt który będzie się uruchamiał przy załadowaniu strony ( onLoad() ) oraz przy zmianie wielkości czcionki przez użytkownika i "ręcznie" dzielił tekst (uwzględniając wielkość liter i przeglądarek) - rozwiązanie chyba optymalne.

Ja osobiście chyba bym to rozwiązał tak jak ma to miejsce w gazetach, czyli rozstrzelenie długich wyrazów. Do tego wykorzystał bym następującą funkcję:
  1. <?php
  2. function myWordWrap( $text, $wordMaxLength = 21, $wordSpacing = '-1px' )
  3. {
  4. $out = '';
  5.  
  6. foreach( explode( ' ', $text ) as $word ) {
  7. if( strlen($word) < $wordMaxLength )
  8. $out .= $word.' '; 
  9. else {
  10. $tmpWord = '';
  11. for( $i = 0; $i < strlen($word); ++$i )
  12. $tmpWord .= $word[$i].' ';
  13. $out .= sprintf( '<span style="word-spacing: %s;">%s</span> ', '-1px', $tmpWord ); 
  14. }
  15. }
  16. return $out;
  17. }
  18. ?>

A oto przykład wykorzystania:
Kod
<div style="width: 200px; overflow: hiiden; font-size: 12pt; text-align: justify; word-spacing: 2px;">
    <?php echo myWordWrap('To jest HipopotamHipopotamHipopotam. On jest moim kuzynem.'); ?>
</div>

i jego wynik:
To jest H i p o p o t a m H i p o p
o t a m H i p o p o t a m . On jest
moim kuzynem.

Tutaj nie jest to widoczne ale odstępy pomiędzy literami w słowie "HipopotamHipopotamHipopotam" są mniejsze (word-spacing: -1px) niż te pomiędzy poszczególnymi wyrazami (word-spacing: 2px), a cała treść jest wyrównana do lewej i prawej strony (text-align: justify). Takie rozwiązanie daje chyba radę. Zbyt wielkim problemem nie jest też dobranie długości wyrazów jakie zostaną rozbite ($wordMaxLength) bo należy wybrać minimalną wartość. Jednakże przy ustaleniu wielkości czcionki (font-size: 12pt) dla większości przeglądarek (FF, IE, Opera, Saffari) wielkości te będą zbliżone.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.