La balise "pre" ne rétrécit pas. Ne pas afficher Barre de défilement horizontale

Je montre beaucoup de code sur mon site. Le reste de mon site est réactif, mais la balise "pre" refuse de rétrécir et affiche les barres de défilement horizontales. Voici une capture d'écran de mon contenu se coupé en raison de la longue étiquette « pré » en haut:La balise "pre" ne rétrécit pas. Ne pas afficher Barre de défilement horizontale

J'utilise trop-plein: horizontal, mais vous pouvez voir dans l'exemple qu'il ne travail. Voici le lien actuel enter link description here

Dès que je change de thème, ça marche très bien! J'utilise un thème enfant de Genesis Framework ...

Source

2016-08-23 Bhagwad Jal Park

Vous devez affecter une largeur à l'élément, afin que le contenu puisse déborder. Essayez par exemple de définir width: 100vw, et cela fonctionnera.

Source

2016-08-23 16:42:50

Votre commentaire précédent a fonctionné (avant votre édition!). Vous avez utilisé une unité "vw" qui semble résoudre le problème. Le réglage à "500px" provoque simplement une largeur fixe et l'élément pré ne rétrécit pas au-delà de cela. Changez votre commentaire retour à la "vw" un et je vais marquer comme répondu: D –

Je pensais au pourcentage au début, mais cela ne fonctionnerait pas car son parent n'a pas une largeur fixe et il ne le fait pas non plus. 'vw' semblait couper la phrase (ne pas afficher) et semblait aussi une solution de contournement pas cher. Mais si cela fonctionne pour vous, alors tant mieux. Changé le retour :) –

C'est 100vw, pas 500vw non? –

Le tag pré affiche le texte préformé et préserve les espaces et les sauts de ligne et est corrigé. Déclarer l'espace blanc normal ou pré-wrap.

pre { 
white-space: normal; 
}

Source

2016-08-23 16:38:33 Vcasso

Cela provoque simplement la rupture des lignes. Je ne veux pas qu'ils se cassent. Je veux qu'ils soient une ligne complète et affichent une barre de défilement horizontale afin que l'utilisateur puisse faire défiler pour voir le code complet ... –

Je ne sais pas pourquoi personne a donné la réponse:

pre { 
    white-space: pre-wrap; 
}

Il préserve les lignes et les mots tout en même temps d'envelopper les lignes s'il n'y a pas assez d'espace.

Source

2018-02-16 16:37:50 VocoJax

La balise "pre" ne rétrécit pas. Ne pas afficher Barre de défilement horizontale

Répondre

Questions connexes