Kann CSS nach jedem Wort in einem Element einen Zeilenumbruch erzwingen?

Ich baue eine mehrsprachige Website auf, wobei der Eigentümer mir bei einigen Übersetzungen hilft. Einige der angezeigten Phrasen benötigen Zeilenumbrüche, um den Stil der Site beizubehalten.

Leider ist der Besitzer kein Computer-Typ. Wenn er also sieht, foo<br />bardass die Möglichkeit besteht, dass er die Daten während der Übersetzung irgendwie ändert.

Gibt es eine CSS-Lösung (neben der Änderung der Breite), die auf ein Element angewendet werden kann, das nach jedem Wort unterbrochen wird?

(Ich weiß, dass ich dies in PHP tun kann, aber ich frage mich, ob es einen raffinierten Trick gibt, den ich in CSS nicht kenne, um dasselbe zu erreichen, vielleicht in den CJK-Funktionen.)

BEARBEITEN

Ich werde versuchen zu zeichnen, was passiert:

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

Das lange Wort bricht automatisch, das kurze Wort nicht. Ich möchte, dass es so aussieht:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

Verwenden

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

Dabei <parent-width>ist die Breite des übergeordneten Elements (oder ein beliebig hoher Wert, der nicht in eine Zeile passt). Auf diese Weise können Sie sicher sein, dass nach einem einzelnen Buchstaben sogar ein Zeilenumbruch auftritt. Funktioniert mit Chrome / FF / Opera / IE7 + (und wahrscheinlich sogar mit IE6, da es auch Wortabstände unterstützt).

Die Antwort von @HursVanBloob funktioniert nur mit übergeordneten Containern mit fester Breite, schlägt jedoch bei Containern mit flüssiger Breite fehl .

Ich habe viele Immobilien ausprobiert, aber nichts hat wie erwartet funktioniert. Schließlich kam ich zu dem Schluss, dass es word-spacingsehr gut funktioniert , einen sehr großen Wert zu geben .

p { word-spacing: 9999999px; }

Für moderne Browser können Sie auch die CSS- vwEinheit verwenden (visuelle Breite in% der Bildschirmgröße).

p { word-spacing: 100vw; }

Eine alternative Lösung wird unter Separater Satz auf ein Wort pro Zeile beschrieben , indem display:table-caption;auf das Element angewendet wird

Versuchen Sie es mit white-space: pre-line; . Es wird ein Zeilenumbruch erstellt, wo immer ein Zeilenumbruch im Code angezeigt wird, ignoriert jedoch das zusätzliche Leerzeichen (Tabulatoren und Leerzeichen usw.).

Schreiben Sie zuerst Ihre Wörter in separate Zeilen in Ihrem Code:

<div>Short
Word</div>

Wenden Sie dann den Stil auf das Element an, das die Wörter enthält.

div { white-space: pre-line; }

Seien Sie jedoch vorsichtig , jeder Zeilenumbruch im Code innerhalb des Elements führt zu einem Zeilenumbruch. Wenn Sie also Folgendes schreiben, führt dies zu einem zusätzlichen Zeilenumbruch vor dem ersten und nach dem letzten Wort:

<div>
    Short
    Word
</div>

Es gibt einen großartigen Artikel über CSS-Tricks , in dem die anderen Leerraumattribute erläutert werden.

Wenn Sie zusätzlich zu den gegebenen Antworten aus verschiedenen Lösungen wählen möchten ...

Eine alternative Methode besteht darin, dem Container eine Breite von 0 zu geben und sicherzustellen, dass ein Überlauf sichtbar ist. Dann wird jedes Wort überlaufen und in einer eigenen Zeile stehen.

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Oder Sie können einen dieser neu vorgeschlagenen widthWerte verwenden, sofern diese zum Zeitpunkt des Lesens noch vorhanden sind.

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Sie können nicht jedes Wort in CSS als Ziel festlegen. Mit ein bisschen jQuery könnten Sie es jedoch wahrscheinlich.

Mit jQuery können Sie jedes Wort in eine <span>und dann eine CSS-festgelegte Spanne einschließen, auf display:blockdie es in eine eigene Zeile gesetzt wird.

Theoretisch natürlich: P.

https://jsfiddle.net/bm3Lfcod/1/

Für diejenigen, die nach einer Lösung suchen, die in einem flexiblen übergeordneten Container mit einem in beiden Dimensionen flexiblen untergeordneten Container funktioniert. z.B. Navbar-Schaltflächen.

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}

Ich hatte das gleiche Problem und keine der Optionen hier hat mir geholfen. Einige Mail-Dienste unterstützen bestimmte Stile nicht. Hier ist meine Version, die das Problem gelöst hat und überall funktioniert, wo ich sie überprüft habe:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

ODER mit CSS:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

Die beste Lösung ist die word-spacing Immobilie.

Fügen Sie die <p>in einem Container mit einer bestimmten Größe hinzu (Beispiel300px ) und nachdem Sie diese Größe als Wert im Wortabstand hinzugefügt haben.

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

Auf diese Weise wird Ihr Satz immer gebrochen und in eine Spalte gesetzt, aber das Mit des Absatzes ist dynamisch.

Hier ein Beispiel Codepen

In meinem Fall,

    word-break: break-all;

hat perfekt funktioniert, hoffe es hilft jedem anderen Newcomer wie mir.