Wie kann ich verhindern, dass lange Wörter mein Div brechen?

Seit dem Wechsel vom TABLE-Layout zum DIV-Layout bleibt ein häufiges Problem bestehen:

PROBLEM : Sie füllen Ihren DIV mit dynamischem Text und es gibt unweigerlich ein super langes Wort, das sich über den Rand Ihrer div-Spalte erstreckt und Ihre Site unprofessionell aussehen lässt.

RETRO-WHINING : Dies ist bei Tabellenlayouts nie passiert. Eine Tabellenzelle wird immer schön auf die Breite des längsten Wortes erweitert.

SEVERITY : Ich sehe dieses Problem auch auf den wichtigsten Websites, insbesondere auf deutschen Websites, auf denen selbst gebräuchliche Wörter wie "Geschwindigkeitsbegrenzung" sehr lang sind.

Hat jemand eine praktikable Lösung dafür?

Weicher Bindestrich

Sie können den Browsern mitteilen, wo lange Wörter geteilt werden sollen, indem Sie einen weichen Bindestrich ( ­) einfügen :

averyvery­longword

kann gerendert werden als

averyverylongword

oder

jedes
sehr lange Wort

Ein netter regulärer Ausdruck kann sicherstellen, dass Sie sie nur einfügen, wenn dies erforderlich ist:

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

Browser und Suchmaschinen sind intelligent genug, um dieses Zeichen beim Durchsuchen von Text zu ignorieren, und Chrome und Firefox (haben andere nicht getestet) ignorieren es beim Kopieren von Text in die Zwischenablage.

<wbr> Element

Eine andere Möglichkeit ist das Injizieren <wbr>eines früheren IE-Ismus , der jetzt in HTML5 vorliegt :

averyvery<wbr>longword

Pausen ohne Bindestrich:

jedes
Langwort

Sie können dasselbe mit einem Leerzeichen ​(oder &#x200B) mit einer Breite von Null erreichen .

Zu Ihrer Information, es gibt auch CSS,hyphens: auto das von den neuesten IE-, Firefox- und Safari- Versionen unterstützt wird ( derzeit jedoch nicht Chrome ):

div.breaking {
  hyphens: auto;
}

Diese Silbentrennung basiert jedoch auf einem Silbentrennungswörterbuch und es ist nicht garantiert, dass lange Wörter gebrochen werden. Es kann jedoch gerechtfertigten Text schöner machen.

Retro-jammernde Lösung

<table>denn Layout ist schlecht, aber display:tableauf anderen Elementen ist in Ordnung. Es wird so schrullig (und dehnbar) sein wie Tische der alten Schule:

div.breaking {
   display: table-cell;
}

overflowund die white-space: pre-wrapAntworten unten sind auch gut.

Zwei Korrekturen:

1. overflow:scroll - Dadurch wird sichergestellt, dass Ihre Inhalte auf Kosten des Designs angezeigt werden (Bildlaufleisten sind hässlich).
2. overflow:hidden- schneidet einfach jeglichen Überlauf ab. Es bedeutet jedoch, dass die Leute den Inhalt nicht lesen können.

Wenn Sie (im SO-Beispiel) verhindern möchten, dass sich das Padding überlappt, müssen Sie wahrscheinlich ein weiteres Div innerhalb des Padding erstellen, um Ihren Inhalt zu speichern.

Bearbeiten: Wie in den anderen Antworten angegeben, gibt es eine Vielzahl von Methoden zum Abschneiden der Wörter, z. B. das Ermitteln der Renderbreite auf der Clientseite (versuchen Sie niemals, dies serverseitig zu tun, da dies niemals zuverlässig und plattformübergreifend funktioniert) JS und das Einfügen von Unterbrechungszeichen oder die Verwendung von nicht standardmäßigen und / oder inkompatiblen CSS-Tags ( word-wrap: break-word scheint in Firefox nicht zu funktionieren ).

Sie benötigen jedoch immer einen Überlaufdeskriptor. Wenn Ihr div einen anderen zu breiten blockartigen Inhalt enthält (Bild, Tabelle usw.), müssen Sie überlaufen, damit das Layout / Design nicht zerstört wird.

Verwenden Sie also auf jeden Fall eine andere Methode (oder eine Kombination davon), aber denken Sie daran, auch einen Überlauf hinzuzufügen, damit Sie alle Browser abdecken.

Bearbeiten Sie 2 (um Ihren Kommentar unten zu adressieren):

Die Verwendung der CSS- overflowEigenschaft ist zunächst nicht perfekt, verhindert jedoch das Brechen von Designs. overflow:hiddenZuerst bewerben . Denken Sie daran, dass der Überlauf beim Auffüllen möglicherweise nicht bricht, also entweder verschachteln divoder einen Rand verwenden (was auch immer für Sie am besten funktioniert).

Dadurch werden überlaufende Inhalte ausgeblendet, sodass Sie möglicherweise an Bedeutung verlieren. Sie könnten eine Bildlaufleiste verwenden (mit overflow:autooder overflow:scrollanstelle von overflow:hidden), aber abhängig von den Abmessungen des Div und Ihrem Design sieht dies möglicherweise nicht gut aus oder funktioniert nicht gut.

Um dies zu beheben, können wir JS verwenden, um Dinge zurückzuziehen und eine Form der automatischen Kürzung durchzuführen. Ich war auf halbem Weg, einen Pseudocode für Sie zu schreiben, aber auf halbem Weg wird es ernsthaft kompliziert. Wenn Sie so viel wie möglich anzeigen müssen, werfen Sie einen Blick auf den Silbentrenner ( wie unten erwähnt ).

Beachten Sie jedoch, dass dies auf Kosten der CPUs des Benutzers geht. Das Laden und / oder Ändern der Größe von Seiten kann lange dauern.

Dies ist bekanntlich ein komplexes Problem, das von Browsern in keiner Weise unterstützt wird. Die meisten Browser unterstützen diese Funktion von Haus aus überhaupt nicht.

Bei einigen Arbeiten mit HTML-E-Mails, bei denen Benutzerinhalte verwendet wurden, das Skript jedoch nicht verfügbar ist (und sogar CSS nicht sehr gut unterstützt wird), sollte das folgende CSS-Bit in einem Wrapper um Ihren nicht räumlichen Inhaltsblock zumindest etwas helfen:

.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) */
}

Bei Mozilla-basierten Browsern enthält die oben genannte XBL-Datei:

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

Leider scheint Opera 8+ keine der oben genannten Lösungen zu mögen, daher muss JavaScript die Lösung für diese Browser sein (wie Mozilla / Firefox). Eine andere browserübergreifende Lösung (JavaScript), die die späteren Editionen von Opera enthält wäre es, Hedger Wangs Skript zu verwenden, das hier zu finden ist: http://www.hedgerwow.com/360/dhtml/css-word-break.html

Andere nützliche Links / Gedanken:

Incoherent Babble »Blog-Archiv» Emulieren von CSS-Zeilenumbrüchen für Mozilla / Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Kein Zeilenumbruch in Opera, wird im IE gut angezeigt
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- Benutzer / 2004-November / 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+ */
}

Verwenden Sie den Stil word-break:break-all;. Ich weiß, dass es auf Tischen funktioniert.

Meinen Sie damit, dass in Browsern, die dies unterstützen, word-wrap: break-worddies nicht funktioniert?

Wenn es in der Textdefinition des Stylesheets enthalten ist , sollte es im gesamten Dokument funktionieren.

Wenn Überlauf keine gute Lösung ist, kann nur ein benutzerdefiniertes Javascript lange Wörter künstlich auflösen.

Hinweis: Es gibt auch dieses <wbr>Word Break-Tag . Dies gibt dem Browser eine Stelle, an der er die Aufstellung aufteilen kann. Leider <wbr>funktioniert das Tag nicht in allen Browsern, nur in Firefox und Internet Explorer (und Opera mit einem CSS-Trick).

Ich habe gerade IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows und Safari überprüft:

word-wrap: break-word;

funktioniert für lange Links innerhalb eines Divs mit einer festgelegten Breite und ohne im CSS deklarierten Überlauf:

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

Ich sehe keine Inkompatibilitätsprobleme

Ich habe gerade aus dieser Frage etwas über Bindestrich herausgefunden . Das könnte das Problem lösen.

Nach vielen Kämpfen hat das für mich funktioniert:

.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;
}

Funktioniert in den neuesten Versionen von Chrome, Firefox und Opera.

Beachten Sie, dass ich viele der von den white-spaceanderen vorgeschlagenen Eigenschaften ausgeschlossen habe - das hat die preEinrückung für mich tatsächlich gebrochen .

Für mich auf einem Div ohne feste Größe und mit dynamischem Inhalt funktionierte es mit:

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

Bezüglich des regulären Ausdrucks in diesem Kommentar ist es gut, aber es fügt den schüchternen Bindestrich nur zwischen Gruppen von 5 Zeichen hinzu, die keine Leerzeichen oder Bindestriche sind. Dadurch kann die letzte Gruppe viel länger als beabsichtigt sein, da danach keine passende Gruppe mehr vorhanden ist.

Zum Beispiel:

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

... ergibt dies:

abcde­12345678901234

Hier ist eine Version mit positivem Lookahead, um dieses Problem zu vermeiden:

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

... mit diesem Ergebnis:

abcde­12345­67890­1234

Die Lösung, die ich normalerweise für dieses Problem verwende, besteht darin, zwei verschiedene CSS-Regeln für den IE und andere Browser festzulegen:

word-wrap: break-word;

Woks perfekt im IE, aber Zeilenumbruch ist keine Standard-CSS-Eigenschaft. Es ist eine Microsoft-spezifische Eigenschaft und funktioniert in Firefox nicht.

Für Firefox ist es am besten, die Regel festzulegen, wenn Sie nur CSS verwenden

overflow: hidden;

für das Element, das den Text enthält, den Sie umbrechen möchten. Der Text wird nicht umgebrochen, sondern der Teil des Texts ausgeblendet, der die Grenze des Containers überschreitet . Es kann eine gute Lösung sein, wenn Sie nicht unbedingt den gesamten Text anzeigen müssen (dh wenn sich der Text in einem <a>Tag befindet).

Update: Die Handhabung in CSS ist wunderbar einfach und mit geringem Aufwand verbunden, aber Sie haben keine Kontrolle darüber, wo Pausen auftreten, wenn sie auftreten. Das ist in Ordnung, wenn Sie sich nicht darum kümmern oder Ihre Daten lange alphanumerische Läufe ohne natürliche Unterbrechungen haben. Wir hatten viele lange Dateipfade, URLs und Telefonnummern, die alle Orte haben, an denen man deutlich besser brechen kann als an anderen.

Unsere Lösung bestand darin, zuerst einen Regex-Ersatz zu verwenden, um nach jeweils 15 (sagen wir) Zeichen, die keine Leerzeichen sind, oder einem der Sonderzeichen, bei denen wir Unterbrechungen bevorzugen, ein Leerzeichen mit der Breite Null (& # 8203;) einzufügen. Wir ersetzen dann erneut, um nach diesen Sonderzeichen ein Leerzeichen mit der Breite Null einzufügen.

Leerzeichen mit einer Breite von Null sind schön, weil sie auf dem Bildschirm nie sichtbar sind. schüchterne Bindestriche waren verwirrend, als sie angezeigt wurden, da die Daten signifikante Bindestriche enthalten. Leerzeichen mit der Breite Null sind ebenfalls nicht enthalten, wenn Sie Text aus dem Browser kopieren.

Die Sonderzeichen, die wir derzeit verwenden, sind Punkt, Schrägstrich, Backslash, Komma, Unterstrich, @, | und Bindestrich. Sie würden nicht glauben, dass Sie etwas tun müssten, um das Brechen nach Bindestrichen zu fördern, aber Firefox (mindestens 3.6 und 4) bricht bei Bindestrichen, die von Zahlen (wie Telefonnummern) umgeben sind, nicht von selbst.

Wir wollten auch die Anzahl der Zeichen zwischen künstlichen Pausen basierend auf dem verfügbaren Layoutbereich steuern. Das bedeutete, dass der Regex für lange, nicht brechende Läufe dynamisch sein musste. Dies wird häufig aufgerufen, und wir wollten aus Leistungsgründen nicht immer wieder dieselben identischen regulären Ausdrücke erstellen. Daher haben wir einen einfachen regulären Ausdrucks-Cache verwendet, der durch den regulären Ausdruck und seine Flags gekennzeichnet ist.

Hier ist der Code; Sie würden wahrscheinlich die Funktionen in einem Dienstprogrammpaket mit einem Namespace versehen:

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 = {};

Test wie folgt:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

Update 2: Es scheint, dass Leerzeichen mit einer Breite von null tatsächlich in kopiertem Text enthalten sind, zumindest unter bestimmten Umständen. Sie können sie einfach nicht sehen. Das Ermutigen von Personen, Text mit versteckten Zeichen zu kopieren, ist natürlich eine Einladung, solche Daten in andere Programme oder Systeme, auch in Ihre eigenen, einzugeben, wo dies zu Problemen führen kann. Wenn es beispielsweise in einer Datenbank landet, schlagen die Suchvorgänge möglicherweise fehl, und Suchzeichenfolgen wie diese schlagen wahrscheinlich ebenfalls fehl. Die Verwendung von Pfeiltasten zum Bewegen solcher Daten erfordert (zu Recht) einen zusätzlichen Tastendruck, um sich über das nicht sichtbare Zeichen zu bewegen. Dies ist für Benutzer etwas bizarr, wenn sie es bemerken.

In einem geschlossenen System können Sie dieses Zeichen bei der Eingabe herausfiltern, um sich zu schützen, aber das hilft anderen Programmen und Systemen nicht.

Alles in allem funktioniert diese Technik gut, aber ich bin mir nicht sicher, welche die beste Wahl für einen Bruch verursachenden Charakter wäre.

Update 3: Dass dieses Zeichen in Daten landet, ist keine theoretische Möglichkeit mehr, sondern ein beobachtetes Problem. Benutzer senden Daten, die vom Bildschirm kopiert wurden, sie werden in der Datenbank gespeichert, Suchanfragen werden unterbrochen, die Dinge werden seltsam sortiert usw.

Wir haben zwei Dinge getan:

1. Schrieb ein Dienstprogramm, um sie aus allen Spalten aller Tabellen in allen Datenquellen für diese App zu entfernen.
2. Filterung hinzugefügt, um es zu unserem Standard-String-Eingabeprozessor zu entfernen, sodass es zu dem Zeitpunkt weg ist, an dem Code es sieht.

Dies funktioniert gut, ebenso wie die Technik selbst, aber es ist eine warnende Geschichte.

Update 4: Wir verwenden dies in einem Kontext, in dem die hier eingegebenen Daten möglicherweise HTML-maskiert sind. Unter den richtigen Umständen können Leerzeichen mit der Breite Null in die Mitte von HTML-Entitäten eingefügt werden, was zu unkonventionellen Ergebnissen führt.

Die Korrektur bestand darin, der Liste der Zeichen, auf die wir nicht verzichten, kaufmännisches Und hinzuzufügen:

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

Sie müssen "Tabellenlayout: behoben" festlegen, damit der Zeilenumbruch funktioniert

HYPHENATOR ist die richtige Antwort (siehe oben). Das eigentliche Problem hinter Ihrer Frage ist, dass Webbrowser (im Jahr 2008) immer noch äußerst primitiv sind und keine Silbentrennungsfunktion haben. Schauen Sie, wir stehen noch am Anfang der Computernutzung - wir müssen geduldig sein. Solange Designer die Web-Welt beherrschen, wird es uns schwer fallen, auf einige wirklich nützliche neue Funktionen zu warten.

UPDATE: Ab Dezember 2011 haben wir jetzt eine weitere Option, mit der neuen Unterstützung dieser Tags in FF und Safari:

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

Ich habe einige grundlegende Tests durchgeführt und es scheint auf einer aktuellen Version von Mobile Safari und Safari 5.1.1 zu funktionieren.

Kompatibilitätstabelle: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

Zur Kompatibilität mit IE 8+ verwenden Sie:

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

Sehen Sie es hier http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Alles was ich tun musste, war dies auf den Stil des Div-Containers mit einer festgelegten Breite anzuwenden.

Benutze das

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

Wenn Sie dies haben -

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

Wechseln Sie einfach zu einem vertikalen Format mit Divs und verwenden Sie in Ihrem CSS die Mindestbreite anstelle der Breite -

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

Wenn Sie echte Tabellendaten anzeigen, ist es natürlich in Ordnung, eine echte Tabelle zu verwenden, da diese semantisch korrekt ist und Personen mit Bildschirmleseprogrammen informiert, die in einer Tabelle enthalten sein sollen. Sie werden für das allgemeine Layout oder das Schneiden von Bildern verwendet, für die die Leute Sie lynchen werden.

Ich musste Folgendes tun, weil, wenn die Eigenschaften nicht in der richtigen Reihenfolge deklariert würden, Wörter zufällig an der falschen Stelle und ohne Hinzufügen eines Bindestrichs gebrochen würden.

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

Ursprünglich gepostet von Enigmo: https://stackoverflow.com/a/14191114

Ja, wenn es möglich ist, overflow : autofunktioniert das Einstellen einer absoluten Breite und Einstellung gut.

p {
    overflow-wrap: break-word;
}


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

"Zeilenumbruch: Wortumbruch" funktioniert in Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

Fügen Sie dies zu cssIhrem div hinzu:word-wrap: break-word;

Bewahren Sie nach all dem Umbrechen und Brechen des Wortes Ihren Überlauf und prüfen Sie, ob dies Ihr Problem löst. Ändern Sie einfach die Anzeige Ihres Divs in:display: inline;

Eine einfache Funktion (erfordert underscore.js) - basierend auf der @ porneL-Antwort

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

Ich habe eine Funktion geschrieben, die hervorragend funktioniert, wenn ­x Buchstaben in das Wort eingefügt werden, um einen guten Zeilenumbruch zu erzielen. Alle Antworten hier unterstützten nicht alle Browser und Geräte, aber dies funktioniert gut mit 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);

}