Comment puis-je réaliser un retour à la ligne multi-navigateurs dans un élément Div ?

Retour à la ligne multi-navigateurs pour les chaînes étendues dans une division

Bien qu'Internet Explorer propose son propre style de retour à la ligne, trouver un retour à la ligne croisé- La solution du navigateur pour envelopper le texte dans un div est une préoccupation courante. Cet article explore les méthodes CSS et JavaScript pour relever ce défi.

Approche CSS

CSS propose plusieurs options pour renvoyer à la ligne les longues chaînes de mots dans un 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 */
}

Approche JavaScript

Bien qu'il ne soit pas aussi élégant que CSS, JavaScript peut également réaliser le retour à la ligne. Une approche consiste à utiliser la fonction wordwrap :

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");
}

Application à un Div

Pour appliquer l'une ou l'autre approche à un div, utilisez le code approprié dans votre CSS ou Fichier JavaScript et attribuez la classe ou l'ID approprié à l'élément div.

Pour le CSS méthode :

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

Pour la méthode JavaScript :

<div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!