J'ai un long par exemple Comment faire faire le wordwrap, mais garder les empreintes? Je ne veux pas avoir de barre de défilement pour un appareil mobile, il est donc préférable d'avoir un moyen d'avoir un moyen d'emballer automatiquement la phrase. Le plus Méthode similaire que j'ai essayée est d'utiliser CSS mais pas exactement comme je le souhaite ci-dessus.
6 Réponses :
Pas la solution la plus idéale, et probablement pas la solution que vous recherchiez, mais c'est une solution, non, moins le travail. Il utilise JQuery pour remplacer le bloc avant avec une liste, car les listes préservent les trindages sur l'emballage de texte.
wordwrap le contenu de la pré de manière à ne pas dépasser la fixe avec. Ceci peut résoudre votre problème. Vous pouvez également changer la largeur dans Corrigé sans plus grand que le navigateur d'iPhone. La clé consiste à envelopper le texte, de sorte qu'il ne force pas la largeur de l'élément de boîtier d'être supérieur à l'écran.
J'ai bien peur qu'il n'y ait aucun moyen de le faire CSS, car CSS n'a pas de "connaissances" de choses comme la teneur textuelle réelle d'un élément, comme les espaces principaux. Donc, une approche différente est nécessaire. Si vous avez le contrôle sur le balisage, vous pouvez remplacer l'élément http://pastehtml.com/view/bjbgnb1v3.html
(la démonstration définit la marge de gauche dans les unités Cela ne gère pas toutes les fonctionnalités de Une approche encore plus logique serait d'utiliser des éléments Si vous ne pouvez pas contrôler le balisage HTML, vous devrez peut-être faire les choses côté client (convertir l'élément pré par un div ( élément contenant une seule ligne div les éléments avec classe attributs correspondant aux niveaux d'indentation souhaités. Ensuite, vous spécifiez simplement des marges de gauche appropriées. Démo:
ch mais utilise un paramètre dans EM comme une sauvegarde raisonnable. Pour une police monospace, un em < / code> est proche de la largeur de deux caractères.)
pré donc si plusieurs espaces à l'intérieur d'une ligne doivent être conservés, ajoutez blanc-espace: pré-enveloppement .
div ni de sorte que la profondeur de la nidification correspond au niveau d'indentation. Cela rendrait la feuille de style simple mais le balisage aurait l'air maladroit.
pré sur d'autres éléments), de la même manière au code de la suggestion de l'ancienne.
ou vous pouvez utiliser php (ou quelque chose comme ça). Par exemple:
Détecter ce que le navigateur / la plate-forme a été utilisé: et pour le système d'exploitation mobile, vous pouvez utiliser une instruction if / else avec une fonction WordWrap pour casser et afficher votre contenu. Par exemple:
Voici un moyen de le faire avec JavaScript. Ceci passe par le démo: avec
Rembourrage-gauche égal au nombre d'espaces d'indentation. Dans la démo, j'ai fait la taille du 
script:
html: < Pré> xxx
CSS:
sortie:
0 commentaires
Cela fonctionne dans chaque navigateur mobile que j'ai déjà essayé sur iOS & Android si vous voulez des coups d'écran, faites le moi savoir. Tout ce qui est nécessaire est une balise CSS
pre {
word-wrap:break-word;
}
Essayez ceci: pré {blanc-espace: pré-enveloppement; Word-Wrap: Break-Word}
Maintenant, sont les 2e et la 3ème ligne du texte au-dessus de celui-ci? Ou voulez-vous de nouvelles lignes créées avec d'autres empreintes?
@Lotush, oui, assez similaire, voir: Pashtml.com/view/bisykurru.html , sauf que la nouvelle ligne ne s'aligne pas avec la même ligne
@HOWARD Que voulez-vous dire par 'ne s'aligne pas avec la même ligne que la 1ère ligne'? Voulez-vous qu'ils commencent à la même position et que vous ne voulez pas les redevances? Si oui, seul 'Word-Wrap: Break-Word' va faire.
@Lotush, lorsque vous redimensionnez cette page de votre navigateur: Pastehtml.com/view/bisykurru.htmlled/a >, lorsque la largeur devient plus petite, la chaîne sera enveloppée en 2e ligne, mais elle ne suivra pas la même intention de la 1ère ligne.
@Lotush, j'ai fait un meilleur exemple: Pastehtml.com/view/biUpkorna.html . Ce que je veux, c'est le cas: s'il y a une pellicule de ligne, la nouvelle ligne ne doit jamais dépasser la marge gauche de la ligne immédiate ci-dessus.
Je suis plus intéressé par la "Pourquoi?". Est-ce pour le code ou pour quoi? S'il s'agit d'une indentation fixe, alors pourquoi ne pas le marquer différemment. Est-ce vraiment un pré?
@HOWARD pourriez-vous mettre à jour la question à inclure que
blanc-espace: Pre-Wrap n'est pas utile dans ce scénario en raison de la non-tiret pour les lignes initialement en retrait. Beaucoup de réponses indiquent à utiliser cela ... Je suis d'accord avec @matthew Rudy,pré pourrait ne pas être le scénario correct ici.