Formating Preformated Text on Your Website Preformated formattazione di testo sul tuo sito web

On occasion, I have used the html <pre> tab to preformat an error message or other standout text in a post. A volte, ho utilizzato il codice html <pre> scheda per preformat un messaggio di errore o di altri standout testo in un post. At least one Sciencetext reader was intrigued as to how I managed to wrap the text rather than it being displayed right across the post area or with a horizontal scrollbar. Almeno una Sciencetext lettore è stato incuriosito da come sono riuscito ad avvolgere il testo piuttosto che esso venga visualizzato in tutta la zona posta o con una barra di scorrimento orizzontale.

Well, there is a very simple CSS hack. Beh, è molto semplice hack CSS. Open up your stylesheet (be sure to make a backup first) and add this code to the bottom. Aprire il tuo foglio di stile (assicuratevi di fare un backup prima) e aggiungere questo codice a fondo.

/* Browser specific (not valid) styles to make preformatted text wrap */ / * Browser specifici (non valido) stili di rendere il testo preformattato avvolgere * /

pre { pre (
white-space: pre-wrap; /* css-3 */ spazi bianchi: pre-wrap; / * css-3 * /
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ spazi bianchi:-moz-pre-wrap; / * Mozilla, dal 1999 * /
white-space: -pre-wrap; /* Opera 4-6 */ spazi bianchi:-pre-wrap; / * Opera * 4-6 /
white-space: -o-pre-wrap; /* Opera 7 */ spazi bianchi:-o-pre-wrap; / * Opera 7 * /
word-wrap: break-word; /* Internet Explorer 5.5+ */ word-wrap: break-word; / * Internet Explorer 5.5 + * /
} )

Save the sheet and refresh the page on which you are using the preformated chunk of text, it should now be wrapping better than Ice T. There are various other ways to implement this Salvare il foglio e aggiornare la pagina in cui si sta utilizzando il preformated pezzo di testo, dovrebbe ora essere meglio di confezionamento Ice T. Ci sono vari altri modi per implementare questa hack , but this is the quickest and easiest. , Ma questo è il più veloce e semplice. You can also add other CSS tags to change the font size, for instance, so that the preformated block of text doesn’t look so clunky. È anche possibile aggiungere altri tag CSS per modificare la dimensione del carattere, ad esempio, in modo che il preformated blocco di testo non guardare in modo clunky. The Sciencetext stylesheet for instance includes font-size:0.9em; to reduce the font size to 90%, which makes it look a little more stylish. Sciencetext il foglio di stile per esempio include font-size: 0.9em; di ridurre la dimensione del carattere al 90%, il che rende guardare un po 'più elegante. You could add borders, change the font, in fact apply all kinds of special formating. Si può aggiungere frontiere, cambiare il tipo di carattere, di fatto si applicano tutti i tipi di formattazione speciale. Just remember it will apply site wide to all pre text if you add the code to the stylesheet. Basta ricordare essa si applica sito in largo per tutti i pre testo se si aggiunge il codice al foglio di stile.