Na stronie internetowej, dla której piszę skrypty php natknąłem się na następujący problem: jeśli w komentarzu znajdzie się słowo dłuższe niż pole przeznaczone na jego treść, to wyraz ten wystaje poza ramki.
Co zrobić by takie wyrazy były automatycznie dzielone i przenoszone do następnej linijki?
PHP - dzielenie d
- shevchenko1987
- Beginner
- Posty: 306
- Rejestracja: 23 listopada 2008, 17:00
- Lokalizacja: Warta
Kod: Zaznacz cały
function wordWrapIgnoreHTML($string, $length = 45, $wrapString = "\n")
{
$wrapped = '';
$word = '';
$html = false;
$string = (string) $string;
for($i=0;$i<strlen($string);$i+=1)
{
$char = $string[$i];
/** HTML Begins */
if($char === '<')
{
if(!empty($word))
{
$wrapped .= $word;
$word = '';
}
$html = true;
$wrapped .= $char;
}
/** HTML ends */
elseif($char === '>')
{
$html = false;
$wrapped .= $char;
}
/** If this is inside HTML -> append to the wrapped string */
elseif($html)
{
$wrapped .= $char;
}
/** Whitespace characted / new line */
elseif($char === ' ' || $char === "\t" || $char === "\n")
{
$wrapped .= $word.$char;
$word = '';
}
/** Check chars */
else
{
$word .= $char;
if(strlen($word) > $length)
{
$wrapped .= $word.$wrapString;
$word = '';
}
}
}
if($word !== ''){
$wrapped .= $word;
}
return $wrapped;
}
W css jest jeszcze kilka możliwości poradzenia sobie z tym problemem, ale to półśrodki. word-wrap(oczywiście nie działa we wszystkich przeglądarkach), overflow: hidden lub scroll. Wybieraj co dla Ciebie najlepsze.
pozdr.
- shevchenko1987
- Beginner
- Posty: 306
- Rejestracja: 23 listopada 2008, 17:00
- Lokalizacja: Warta
-
- Beginner
- Posty: 113
- Rejestracja: 11 września 2008, 15:48
- shevchenko1987
- Beginner
- Posty: 306
- Rejestracja: 23 listopada 2008, 17:00
- Lokalizacja: Warta
A mógłbyś podać linka do wersji sieciowej tej stronki. Ciekawi mnie jak to jest zbudowane (spojrzę na to firebugiem a i może coś pomogę).
Według mnie musiałbyś nadać dla tego diva w którym jest span z tekstem odpowiedni width i height w css. Dla heighta z wartością auto oczywiście i powinno być dobrze.
Ps. "spojrzę" nie był błedem ortograficznym tylko kolejnym przejawem upierdliwości fnmirka. Albo bota na tym forum (już sam nie wiem).
Według mnie musiałbyś nadać dla tego diva w którym jest span z tekstem odpowiedni width i height w css. Dla heighta z wartością auto oczywiście i powinno być dobrze.
Ps. "spojrzę" nie był błedem ortograficznym tylko kolejnym przejawem upierdliwości fnmirka. Albo bota na tym forum (już sam nie wiem).
- shevchenko1987
- Beginner
- Posty: 306
- Rejestracja: 23 listopada 2008, 17:00
- Lokalizacja: Warta
Problem rozwiązany dzięki abc667:
Kod: Zaznacz cały
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="pl">
<script type="text/javascript">
var znaki = [];
window.onload = function() {
for(var i=33;i<256;i++)
{
document.getElementById('char-test').innerHTML = String.fromCharCode(i);
znaki[i] = document.getElementById('char-test').offsetWidth;
}
//sprawdzamy wszystkie bloki
//tutaj dla przykładu sprawdzamy jeden
//szerokość w pikselach, width - border-width
checkBlock(document.getElementById('test'), 76);
}
var segments = [];
var tmp = 0;
var seg_len = 0;
function checkBlock(obj, block_width) {
var out = '';
segments = obj.innerHTML.toString().replace( new RegExp( "<", "gi" ), " <" ).replace( new RegExp( ">", "gi" ), "> " ).split(' ');
for(var j=0;j<segments.length;j++)
{
seg_len = 0;
var sout = '';
for(var k=0;k<segments[j].length;k++)
{
tmp = segments[j].charCodeAt(k);
if((tmp > 255) || (tmp < 32))
{
tmp = 64;
}
seg_len += znaki[ tmp ];
if(seg_len > block_width)
{
sout += ' '+segments[j][k];
seg_len = 0;
}
else
{
sout += segments[j][k];
}
}
out += sout+' ';
}
//alert(out);
obj.innerHTML=out;
}
</script>
<title>...</title>
</head>
<body>
<span id="char-test" style="margin: 0; padding: 0; border: none; visibility:hidden;"></span>
<p id="test" style="width: 80px; border: 1px solid black;">aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa afffffffffffffffffffffffffffffff dddddddddddddddddddd dbfndbkjnd
dfgdfgdfg
dfg
df
ggd
dfd
df</p>
</body>
</html>