Jak zapobiec uszkodzeniu mojego DIVa przez długie słowa?

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?

Miękki łącznik

Możesz wskazać przeglądarkom, gdzie mają dzielić długie słowa, wstawiając miękki łącznik ( ­):

averyvery­longword

mogą być renderowane jako

averyverylongword

lub

averyvery-
longword

Ładne wyrażenie regularne może zapewnić, że nie będziesz ich wstawiać, chyba że będzie to konieczne:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

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> element

Inną opcją jest wstrzyknięcie <wbr>, dawnego IE-izmu , który jest teraz w HTML5 :

averyvery<wbr>longword

Przerwy bez łącznika:

bardzo długi
miecz

To samo można osiągnąć za pomocą znaku spacji o zerowej szerokości ​(lub &#x200B).

FYI jest też CSShyphens: auto obsługiwany przez najnowsze IE, Firefox i Safari ( ale obecnie nie Chrome ):

div.breaking {
  hyphens: auto;
}

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, ale display:tablena innych elementach jest w porządku. Będzie tak dziwaczny (i rozciągliwy) jak oldschoolowe stoły:

div.breaking {
   display: table-cell;
}

overflowa white-space: pre-wrapodpowiedzi poniżej też są dobre.

Dwie poprawki:

1. overflow:scroll - zapewnia to, że treść jest widoczna kosztem projektu (paski przewijania są brzydkie)
2. 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 overflowwłaściwości CSS, która nie jest idealna, ale zapobiega niszczeniu projektów. Zastosuj overflow:hiddennajpierw. Pamiętaj, że przepełnienie może nie pęknąć na wyściółce, więc albo zagnieżdżaj się, divalbo 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:autolub overflow:scrollzamiast overflow: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.

Jak 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:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

W przypadku przeglądarek opartych na Mozilli wspomniany wyżej plik XBL zawiera:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

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

CSS Cross Browser Word Wrap

.word_wrap
{
    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+ */
}

Użyj stylu word-break:break-all;. Wiem, że to działa na stołach.

Czy masz na myśli to, że w przeglądarkach, które go obsługują, word-wrap: break-wordnie 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).

Właśnie sprawdziłem przeglądarkę IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows i Safari:

word-wrap: break-word;

działa dla długich linków wewnątrz div z ustawioną szerokością i bez zadeklarowanego przepełnienia w css:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

Nie widzę żadnych problemów z niekompatybilnością

Właśnie dowiedziałem się o łączniku z tego pytania . To może rozwiązać problem.

Po wielu walkach, to zadziałało dla mnie:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Działa w najnowszych wersjach Chrome, Firefox i Opera.

Zauważ, że wykluczyłem wiele white-spacewłaściwości, które sugerowali inni - które faktycznie złamały prewcięcie dla mnie.

Dla mnie na div bez stałego rozmiaru iz dynamiczną zawartością działał przy użyciu:

display:table;
word-break:break-all;

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:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... powoduje to:

abcde­12345678901234

Oto wersja z pozytywnym wyprzedzeniem, aby uniknąć tego problemu:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... z tym wynikiem:

abcde­12345­67890­1234

Rozwiązaniem, którego zwykle używam w przypadku tego problemu, jest ustawienie 2 różnych reguł css dla IE i innych przeglądarek:

word-wrap: break-word;

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

overflow: hidden;

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)

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:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Testuj w ten sposób:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

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:

1. Napisałem narzędzie do usuwania ich ze wszystkich kolumn wszystkich tabel we wszystkich źródłach danych dla tej aplikacji.
2. Dodano filtrowanie, aby usunąć go z naszego standardowego procesora wejściowego ciągów, więc zniknie, gdy zobaczy go jakikolwiek kod.

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:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

Trzeba ustawić „table-layout: fixed”, aby zawijanie słów działało

ŁĄCZNIK to poprawna odpowiedź (podana powyżej). Prawdziwym problemem stojącym za twoim pytaniem jest to, że przeglądarki internetowe są nadal (w 2008 r.) Niezwykle prymitywne, ponieważ nie mają funkcji dzielenia wyrazów. Słuchaj, wciąż jesteśmy na początku używania komputera - musimy uzbroić się w cierpliwość. Dopóki projektanci będą rządzić internetowym światem, nie będziemy mogli czekać na naprawdę przydatne nowe funkcje.

AKTUALIZACJA: od grudnia 2011 r. Mamy teraz inną opcję, z pojawiającą się obsługą tych tagów w FF i Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

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

Aby zapewnić zgodność z IE 8+, użyj:

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

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ą.

Użyj tego

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

Jeśli masz to -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

po prostu przełącz się na format pionowy z elementami div i użyj min-width w swoim CSS zamiast width -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

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ć.

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.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Pierwotnie opublikowane przez Enigmo: https://stackoverflow.com/a/14191114

Tak, jeśli to możliwe, ustawienie bezwzględnej szerokości i ustawienie overflow : autodziała dobrze.

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

„Word-wrap: break-word” działa w przeglądarce Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

Dodaj to do cssswojego div:word-wrap: break-word;

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;

Prosta funkcja (wymaga underscore.js) - oparta na odpowiedzi @porneL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

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:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}