Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

A tutorial on how to wrap the sample code on your phone to avoid annoying scrollbars

2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 250

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report