it-swarm.dev

Wie kann man Text in HTML umbrechen?

Wie kann ein Text wie aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, der die Breite einer div überschreitet (sagen wir 200px), umbrochen werden?

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

162
Satya Kalluri

Versuche dies:

div {
    width: 200px;
    Word-wrap: break-Word;
}
217

Sie können einen weichen Bindestrich wie folgt verwenden:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Dies wird als angezeigt

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

wenn die Box nicht groß genug ist oder als

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

wenn es so ist.

51
Kim Stebel

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

div {
  width: 200px;
  Word-break: break-all;
  white-space: normal;
}
50
lukaserat
   div {
    // set a width
    Word-wrap: break-Word
}

Die 'Word-wrap'-Lösung funktioniert nur in IE und Browsern, die CSS3 unterstützen.

Die beste Cross-Browser-Lösung ist die Verwendung der serverseitigen Sprache (PHP oder was auch immer), um lange Zeichenfolgen zu finden und in regelmäßigen Abständen die html-Entität ​.__ zu platzieren. Diese Entität bricht die langen Wörter gut und funktioniert für alle Browser.

z.B.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
28
Orr Siloni

Die einzige, die in IE, Firefox, Chrome, Safari und Opera funktioniert, wenn im Word keine Leerzeichen enthalten sind (z. B. eine lange URL), lautet:

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

Ich fand das kugelsicher.

8
Kyle Dearle

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

Eine andere Option verwendet auch:

div
{
   white-space: pre-line;
}

Dadurch werden alle Ihre div-Elemente in allen Browsern festgelegt, die CSS1 unterstützen (was bei fast allen gängigen Browsern bis IE 8) der Fall ist.

6
Andrew Marais

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" 
2
Swapnil Godambe

Cross Browser

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

Versuche dies 

div {display: inline;}
0

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 .

0
Juraj Guniš

Im HTML-Body versuchen Sie Folgendes:

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

Im CSS-Body versuchen Sie Folgendes:

background-size: auto;

table-layout: fixed;
0
Wesson2

Ich habe Bootstrap benutzt. 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;
}
0
Rahul Wasnik

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-overflow: Ellipsis add ... und line-clamp zeigen die Anzahl der Zeilen an.

0

Eine serverseitige Lösung, die für mich funktioniert, ist: $message = wordwrap($message, 50, "<br>", true);, wobei $message eine Zeichenfolgenvariable ist, die die zu zerlegenden Word/Zeichen enthält. 50 ist die maximale Länge eines bestimmten Segments, und "<br>" ist der Text, den Sie alle (50) Zeichen einfügen möchten.

0
deshbanks