zawijania CSS/js

Question

Szuka się sposób przeglądarki owijania długie części tekstu, które nie mają na rozerwanie przestrzenie (na przykład długie URL) wewnątrz div z góry określonych szerokościach.

Oto niektóre rozwiązania znalazłem całym Internecie i dlaczego oni NIE pracę dla mnie:

• overflow: hidden/Auto/przewijanie - Muszę cały tekst będzie widoczny bez przewijania. Element div może rosnąć pionowo, ale nie poziomo.
• Wstrzykiwanie & nieśmiały; na ciąg znaków przez js/server-side - & nieśmiały; jest obsługiwany przez FF3 teraz, ale kopiowanie i wklejanie adresu URL z nieśmiałym &; w środku nie będzie działać w Safari. Ponadto, według mojej wiedzy, nie ma czystej metody pomiaru szerokości tekstu, aby znaleźć najlepsze przesunięcia ciągów, aby dodać te znaki do (jest jeden hacky sposób, patrz następny element). Innym problemem jest to, że powiększanie Firefoksa i Opery może z łatwością to zepsuć.
• dumping tekst do ukrytego elementu i pomiaru offsetWidth - związane z pozycji wyżej, wymaga dodania dodatkowych znaków w ciągu. Ponadto, pomiar ilości przerw wymaganych w długim tekście może z łatwością wymagać tysięcy drogich wstawek DOM (po jednym dla każdej długości podłańcuchowej), które mogłyby skutecznie zamrozić stronę.
• użyciu czcionki o stałej szerokości się - znowu, powiększanie może zepsuć obliczeń szerokości, a tekst nie może być stylizowany swobodnie.

Rzeczy, które wyglądają obiecująco, ale nie są zupełnie tam:

• word-wrap break-word - To teraz part of CSS3 working draft, ale to nie jest obsługiwane przez obu Firefox, Opera lub Safari jeszcze. Byłoby to idealne rozwiązanie, jeśli pracował na wszystkich przeglądarkach dzisiaj :(
• wstrzykiwanie <WBR> tagi w ciągu poprzez js/server-side - kopiując i wklejając adresy URL działa we wszystkich przeglądarkach, ale wciąż nie dobrze określić, gdzie umieścić przerwy, a także ten znacznik unieważnia HTML:
• dodaje przerwy po każdym znaku - jest lepszy niż tysiące wstawień DOM, ale wciąż nie jest idealny (dodawanie elementów DOM do dokumentu je pamięć i zwalnia zapytania selektora, między innymi.)

Czy ktoś ma więcej pomysłów na rozwiązanie tego problemu?

Answer 1

Było luźno związanych z problemem tutaj textarea with 100% width ignores parent element's width in IE7

Nie wiem, czy którykolwiek rozstrzygające roztwór kiedykolwiek znaleziono, ale wydaje się, że najbliżej był word-break: break-wszystko, które mogą wykonać zadanie w Internet Exploder.

Znalazłam też to http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html zakopane w moich zakładek, co wskazuje na pracę wokół większości innych przeglądarek, które mogą pomóc.

CSS3 będzie wielki, jeśli kiedykolwiek staje się tutaj ...

Nadzieję, że pomoże, będą zainteresowani, aby zobaczyć, co wymyślić. Niestety nie mogę zaoferować niczego przetestowanego ani bardziej konkretnego.

Answer 2

Zazwyczaj zajmowałem się tym przy użyciu kombinacji word-wrap i pomysłu <wbr>. Zauważ, że jest kilka variants. jak widać, ​ jest prawdopodobnie najlepszym wyborem dla zgodności.

word-wrap wsparcie przeglądarka nie straszny, wszystko pod uwagę, Safari, Internet Explorer i Firefox 3.1 (Alpha Build) wszystko to wsparcie (src), więc nie może być wszystko, co daleko.

W odniesieniu do złamania po stronie serwera, Użyłem tej metody dość skutecznie (php):

function _wordwrap($text) { 
    $split = explode(" ", $text); 
    foreach($split as $key=>$value) { 
     if (strlen($value) > 10) { 
      $split[$key] = chunk_split($value, 5, "​"); 
     } 
    } 
    return implode(" ", $split); 
} 

Zasadniczo słów ponad 10 znaków, podzielić je na 5 znaków każda. To wydaje się działać we wszystkich przypadkach użycia, które mi przekazano.

Answer 3

Używanie wyrażenia regularnego w PHP powinno być szybsze, aby rozbić długie słowa. Stworzyłem funkcję, która obsługuje htmlspecialchars i łamie słowa z nieśmiałym &; Oto funkcja dla każdego, kto jest zainteresowany. Po prostu podaj ciąg znaków i maksymalną długość słowa (zostaw jako 0, jeśli nie chcesz rozbijać słów z & nieśmiałej;) i zwróci ciąg znaków ze skonwertowanymi znacznikami html i słowa zerwane z nieśmiałym &;

function htmlspecialchars2($string = "", $maxWordLength = 0) 
{ 
    if($maxWordLength > 0) 
    { 
     $pattern = '/(\S{'.$maxWordLength.',}?)/'; 
     $replacement = '$1­'; 
     $string = preg_replace($pattern, $replacement, $string); 
    } 

    //now encode special chars but dont encode ­ 
    $string = preg_replace(array('/\&(?!shy\;)/','/\"/',"/\'/",'/\</','/\>/'), array('&amp;','&quot;','&#039;','&lt;','&gt;'), $string); 

    return $string; 
} 

Answer 4

Możesz użyć układu tabeli + zawijanie wyrazów atrybut CSS, który teraz działa w IE7-8 i FF3.5. To nie rozwiąże problemu, ale przynajmniej twój projekt nie zostanie złamany.

Answer 5

Css yo!

.wordwrap { 
    white-space: pre-wrap; /* css-3 */ 
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
    white-space: -pre-wrap; /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
} 

Również Właśnie znalazłem ten artykuł http://www.impressivewebs.com/word-wrap-css3/

Więc należy użyć

.wordwrap { 
    word-wrap: break-word; 
} 

.no_wordwrap { 
    word-wrap: normal; 
} 

Answer 6

użycie white-space: normalny w css jeśli trzeba zawijać tekst automatycznie w zależności od wysokości i szerokość elementu wyświetlającego nadzieję, że może to pomóc w pełnym u.

Answer 7

Bardzo podobna do odpowiedzi Owena, to osiąga to samo po stronie serwera w jednym wierszu:

return preg_replace_callback('/\w{10,}/', create_function('$matches', 'return chunk_split($matches[0], 5, "​");'), $value); 

Answer 8

może to rozwiązać problem

function htmlspecialchars2($string = "", $maxWordLength = 0){ 
return wordwrap($string , $maxWordLength,"\n", true); 
}