Automatic line breaks in html pre tags
|
At this time, you can use overflow:auto; (when the code exceeds the container boundary, display the scroll box), but this method does not work for all mainstream browsers. Some browsers will directly cut off the excess content. We all know that the <pre> tag can define preformatted text. A common application is to represent computer source code. Text enclosed in the pre element usually retains spaces and line breaks, but unfortunately, when you write code inside the <pre> tag, if you don't wrap it manually, it will also be preserved for you and will not automatically wrap. At this time, you can use overflow:auto; (when the code exceeds the container boundary, display the scroll box), but this method does not work for all mainstream browsers. Some browsers will directly cut off the excess content.
Since there are not many places in this website that use source code, and I didn’t pay much attention to this issue before, not long ago, an enthusiastic netizen reported this problem on QQ, so when I changed the theme this time, I looked for a solution and shared it. Copy code The code is as follows:pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } This CSS solution allows the text in the pre tag to wrap automatically. I have tested it on all the browsers I have, and all of them support it, including IE6, IE7, IE8, Firefox, Opera, Safari and Chrome. The border will only go out of bounds when you shrink the window to a width of less than 20 characters. In addition, I saw some posts sharing this CSS technique, saying that it can solve the problem of long word wrapping, but I tried it and it didn't work. |
<<: Tutorial on using Webpack in JavaScript
>>: Achieve 3D flip effect with pure CSS3 in a few simple steps
Recommend
Detailed tutorial on how to quickly install Zookeeper in Docker
Docker Quickly Install Zookeeper I haven't us...
Detailed explanation of this pointing in JS arrow function
Arrow function is a new feature in ES6. It does n...
Detailed explanation of VUE responsiveness principle
Table of contents 1. Responsive principle foundat...
About the IE label LI text wrapping problem
I struggled with this for a long time, and after s...
Tutorial on installing Nvidia graphics card driver in Ubuntu 18.04 (with pictures and text)
0. Preliminary preparation Disable secure boot in...
Detailed explanation of type protection in TypeScript
Table of contents Overview Type Assertions in syn...
Practice of dynamically creating dialog according to file name in vue+el-element
Table of contents background accomplish 1. Encaps...
Basic concepts and common methods of Map mapping in ECMAScript6
Table of contents What is a Mapping Difference be...
Three notification bar scrolling effects implemented with pure CSS
Preface The notification bar component is a relat...
Design a data collector with vue
Table of contents Scenario Core Issues Status mon...
Detailed explanation of the installation commands and usage of Docker and FastDFS
Docker Features 1) Quick to get started It only t...
Mysql solution to improve the efficiency of copying large data tables
Preface This article mainly introduces the releva...
Use Vue3 to implement a component that can be called with js
Table of contents Preface 1. Conventional Vue com...
How to build a redis cluster using docker
Table of contents 1. Create a redis docker base i...
The difference between this.$router and this.$route in Vue and the push() method
The official document states: By injecting the ro...