[PHP][CSS]Przełamywanie ciągłego tekstu Opcje

[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

[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

[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ę:

[PHP] pobierz, plaintext 
<?php
function myWordWrap( $text, $wordMaxLength = 21, $wordSpacing = '-1px' )
{	
	$out = '';
 
	foreach( explode( ' ', $text ) as $word ) {
		if( strlen($word) < $wordMaxLength )
			$out .= $word.' '; 
		else {
			$tmpWord = '';
			for( $i = 0; $i < strlen($word); ++$i )
				$tmpWord .= $word[$i].' ';
			$out .= sprintf( '<span style="word-spacing: %s;">%s</span> ', '-1px', $tmpWord ); 
		}
	}
	return $out;
}
?>
[PHP] pobierz, plaintext 

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.