Wie kann man Text in HTML umbrechen?

Wie kann Text, aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaader die Breite eines div(sagen wir 200px) überschreitet , umbrochen werden?

Ich bin offen für jede Art von Lösung wie CSS, jQuery usw.

Versuche dies:

div {
    width: 200px;
    word-wrap: break-word;
}

Stellen Sie auf Bootstrap 3 sicher, dass der Leerraum nicht als "Nowrap" festgelegt ist.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

Sie können einen weichen Bindestrich wie folgt verwenden:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Dies wird als angezeigt

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

wenn die enthaltende Box nicht groß genug ist oder als

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

wenn es so ist.

   div {
    // set a width
    word-wrap: break-word
}

Die ' word-wrap' Lösung funktioniert nur in IE und unterstützten Browsern CSS3.

Die beste browserübergreifende Lösung besteht darin, Ihre serverseitige Sprache (PHP oder was auch immer) zu verwenden, um lange Zeichenfolgen zu finden und in regelmäßigen Abständen die HTML-Entität darin zu platzieren. ​ Diese Entität bricht die langen Wörter gut und funktioniert in allen Browsern.

z.B

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Die einzige Funktion, die in IE, Firefox, Chrome, Safari und Oper funktioniert, wenn das Wort keine Leerzeichen enthält (z. B. eine lange URL), ist:

div{
    width: 200px;  
    word-break: break-all;
}

Ich fand das kugelsicher.

Das hat bei mir funktioniert

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

Eine andere Option ist auch:

div
{
   white-space: pre-line;
}

Dadurch werden alle Ihre div-Elemente in allen Browsern festgelegt, die CSS1 unterstützen (dies sind so ziemlich alle gängigen Browser bereits in IE 8).

Browserübergreifend

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

Fügen Sie dieses CSS dem Absatz hinzu.

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left" 

Beispiel aus CSS-Tricks :

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

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

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

Weitere Beispiele hier .

Eine serverseitige Lösung, die für mich funktioniert, ist: $message = wordwrap($message, 50, "<br>", true);Wo $messageist eine Zeichenfolgenvariable, die das Wort / die Zeichen enthält, die aufgelöst werden sollen? 50 ist die maximale Länge eines Segments und "<br>"der Text, den Sie alle (50) Zeichen einfügen möchten.

Versuche dies

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Die Eigenschaft Textüberlauf: Auslassungspunkte hinzufügen ... und Linienklemme zeigen die Anzahl der Linien an.

Im HTML-Body versuchen Sie:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

Versuchen Sie im CSS-Body:

background-size: auto;

table-layout: fixed;

Versuche dies

div {display: inline;}

Ich habe Bootstrap verwendet. Mein HTML-Code sieht aus wie ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

Sie können dieses CSS verwenden

p {
  width: min-content;
  min-width: 100%;
}

Versuchen:

overflow-wrap: break-word;

Verwenden Sie das word-wrap:break-wordAttribut zusammen mit der erforderlichen Breite. Geben Sie die Breite hauptsächlich in Pixel und nicht in Prozent an.

width: 200px;
word-wrap: break-word;