HTML considère le style de la balise

Probablement en utilisant la balise

 Il s'agit d'une balise très spéciale en HTML qui permet aux espaces qu'elle contient d'apparaître réellement. Par exemple : quatre espaces apparaîtront en réalité comme quatre espaces. Ceci est différent de ce que font habituellement les autres balises, qui compressent les espaces entre elles en un seul. De ce point de vue, la balise <pre class="brush:php;toolbar:false"> est vraiment utile. <p style="padding: 0px; margin: 0px; color: rgb(51, 51, 51); font-family: 微软雅黑, " microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb>Utilisez-vous la balise <code> dans la balise <pre class="brush:php;toolbar:false"> 

 Le "per" de la balise signifie "texte préformaté" (texte préformaté), et il n'y a aucune spécification spécifique sur le texte à l'intérieur. La sémantique de la balise <code> indique que le texte qu'elle contient est du code. Cela m'est particulièrement utile lorsque j'ai besoin d'afficher un morceau de code, en les utilisant, voici un exemple : <pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

Pour expliquer : entre

<code> la nouvelle ligne sera également affichée sous forme de ligne vide, ce qui est très ennuyeux. Il n'existe pas de bon moyen CSS pour résoudre ce problème, le meilleur moyen est de démarrer le code sur la même ligne que la balise <pre class="brush:php;toolbar:false">, ou d'utiliser un compilateur pour supprimer la nouvelle ligne ici. < C'est une bonne idée de définir le style de police pre> sur une police à espacement fixe. </p><p>Heureusement pour nous, la police par défaut du navigateur définit déjà <pre class="brush:php;toolbar:false"> sur une police à espacement fixe, vous ne pouvez donc rien faire avec. Bien sûr, vous pouvez définir une police que vous aimez. <img src="https://img.php.cn//upload/image/141/220/754/1499484133429984.jpg" title="1499484133429984.jpg" alt="HTML considère le style de la balise <pre class="brush:php;toolbar:false">"/></p>Voici un article écrit par Michael Tuck en 2009, qui s'intéressait aux "piles de polices". La pile de polices fait référence à la liste d'un groupe de polices dans une balise font-family, avec la police préférée répertoriée devant et les polices alternatives répertoriées dans l'ordre. Sa pile de polices à espacement fixe fait bon usage des polices préinstallées sur le système multiplateforme. <p   style="max-width:90%"Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);"></p><p></p><p></p>Je ne sais pas si la pile de polices est obsolète aujourd'hui, mais c'est quand même un bon début. <p></p>Vous pouvez également utiliser des polices personnalisées. Ou utilisez des services tiers. Au moment où j'écris ces lignes, Typekit propose 23 polices à espacement fixe. <pre class="brush:html;toolbar:false">font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", 
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Plier ou ne pas plier ?

"/></p>Il s’agit d’une question de préférence personnelle. Pour moi personnellement, il y a deux situations. <p></p>Lorsque j'écris du code dans l'éditeur, j'ai tendance à laisser le code s'enrouler automatiquement sans barres de défilement horizontales. Et quand je lis du code dans un article, j'aime que le code ne se casse pas. Je sais que c'est bizarre. Dans CodePen, nous offrons aux utilisateurs la possibilité de choisir de rompre ou non, car chacun a ses propres préférences. <p></p><p   style="max-width:90%"Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);"></p><p>Lors de l'affichage du code, vous devez choisir de l'envelopper ou non. Si vous choisissez d'envelopper, heureusement, vous pouvez utiliser les styles uniques fournis pour la balise <pre class="brush:php;toolbar:false"> pour préserver les espaces lors de l'enveloppement, comme ceci : </p><p></p>Si vous ne souhaitez pas envelopper, Vous n'êtes pas obligé de procéder comme ci-dessus, mais vous devez considérer ce qui se passe si une ligne est trop longue. Les lignes trop longues peuvent étirer un conteneur de largeur fixe ou dépasser ses limites. Pour éviter cela, je vous suggère d'ajouter une barre de défilement horizontale : <p><img src="https://img.php.cn//upload/image/839/197/758/1499484213362346.gif" title="1499484213362346.gif" alt="HTML considère le style de la balise <pre class="brush:php;toolbar:false">"/></p><p></p><pre class="brush:html;toolbar:false">pre {
  white-space: pre-wrap;
}

Copier après la connexion

Vous pouvez également considérer

max-height

pour spécifier la hauteur maximale , et overflow:auto autorise toutes les barres de défilement à empêcher les blocs de code d'être trop grands.

pre {
  overflow-x: auto;
}

Peut-être qu'il devrait être rendu adaptatif

"/></p>Certaines personnes, probablement vous inclus, n'aiment ni le retour à la ligne ni le défilement. Il existe également une solution à cette situation. Vous pouvez conserver <pre class="brush:php;toolbar:false"> à sa largeur de conteneur par défaut, mais lui permettre de s'étendre pendant l'interaction : <p><pre class="brush:html;toolbar:false">pre:hover,
pre:focus {
  width: min-content;
}

Copier après la connexion