All code and terminal blocks in the blog and on the homepage präformatiert using \u0026lt;pre> blocks are shown. However, these destroy the layout quite simply, if the horizontal width of the text is too big. The text is most easily displayed and then overlays the other content or is even completely out of the page. This is of course not desired. But a break is usually not the optimal solution, significantly affected because just at the source code of automatic word wrap the importance (for copying \u0026lt;pre> the content of the blocks are not copied it, but on the page but it looks funny.) Some time ago I have so little on CSS code rotated to automatically scroll bars are offered and the . height of the block is limited in size:
post
color: # 444 ; background-color: # f5f5f5 ; border: 1px solid # 666 ; Margin : 1em; padding: 0.5em ; / / scrollbars & Groessenbeschraenkung overflow: auto ; max-height : 500px;} This works reasonably well already, but refused all WebKit-browser horizontal scroll bars to display. Instead, the text within the \u0026lt;pre> blocks was simply wrapped, although I did not want just that. The solution to the problem is with the CSS 3 property called "word-wrap" . Simple: post pre {/ / "normal" formatting
color: # 444 ; background-color: # f5f5f5 ; border : 1px solid # 666; margin: 1em ; padding: 0.5em ; / / scrollbars & Groessenbeschraenkung overflow : auto ; max-height : 500px ; word-wrap: normal ; } Even if the value is "normal" actually suggests that this setting is also standard, this seems to WebKit not to vote at least . By default, WebKit seems to be "word-wrap: break-word" to work for präformatiertem text. The disadvantage of this entire method is that the text is simply cut off (as in "overflow: hidden") if no scroll bars can be offered. This is for example in systems with touch screen like the iPhone the case. However, it is with these devices well hardly see through the complete source code and do it first is better than nothing;)
0 comments:
Post a Comment