A tutorial on how to wrap the sample code on your phone to avoid annoying scrollbars
This article mainly explains "how to make the sample code appear on the mobile phone to avoid annoying scroll bars", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "Let the sample code display on the mobile phone to avoid annoying scroll bar tutorial"!
The code is as follows:
/*
Values for white-space property:
normal default. White space is ignored by browsers.
Pre white space is preserved by the browser. It behaves like a tag in HTML.
Nowrap text does not wrap, text continues on the same line until it is encountered
label.
Pre-wrap preserves the whitespace sequence, but wraps normally.
Pre-line incorporates whitespace sequences, but retains newline characters.
*/
pre {
white-space: pre-line;
}
I like to use PrismJS, so I need to use different selectors:
The code is as follows:
/*
Matches to pre,code elements of class that begin with language-
For example:
or
*/
pre[class*='language-'], code[class*='language-'] {
white-space: pre-line;
}
Great white-space property to avoid horizontal scrolling on mobile devices. Of course, you need to decide which devices to use via media query depending on the situation. Sometimes code examples are line-broken, which may be hard to read, but line breaks are certainly friendlier than maddening horizontal scroll bars.
At this point, I believe we have a deeper understanding of the "let the sample code line display on the phone to avoid annoying scroll bar tutorial", may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!
