Wie kann ich einen browserübergreifenden Zeilenumbruch in einem Div-Element erreichen?

Browserübergreifender Zeilenumbruch für erweiterte Zeichenfolgen in einem Div

Während Internet Explorer seinen eigenen Zeilenumbruchstil bietet, ist die Suche nach einem Cross- Eine Browserlösung zum Umbrechen von Text innerhalb eines Div ist ein häufiges Problem. In diesem Artikel werden sowohl CSS- als auch JavaScript-Methoden zur Bewältigung dieser Herausforderung untersucht.

CSS-Ansatz

CSS bietet mehrere Optionen zum Umbrechen langer Zeichenfolgen innerhalb eines div:

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

JavaScript-Ansatz

Obwohl nicht so elegant wie CSS, JavaScript kann auch einen Zeilenumbruch erreichen. Ein Ansatz besteht darin, die Wordwrap-Funktion zu verwenden:

function wordwrap(str, width) {
  if (!width) { width = 80; }

  var re = new RegExp(".{" + width + "}(\s|$)|\S+\S{0," + (width - 1) + "}", "g");
  return str.match(re).join("\n");
}

Anwenden auf ein Div

Um einen der beiden Ansätze auf ein Div anzuwenden, verwenden Sie den entsprechenden Code in Ihrem CSS oder JavaScript-Datei und weisen Sie dem div-Element die entsprechende Klasse oder ID zu.

Für das CSS Methode:

<div class="wordwrap">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit mi nibh, id sagittis tellus maximus eget. Mauris ut pharetra est, eu mattis quam.
</div>

Für die JavaScript-Methode:

<div>

Das obige ist der detaillierte Inhalt vonWie kann ich einen browserübergreifenden Zeilenumbruch in einem Div-Element erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!