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.

pre wrap 解決<pre>標簽里的文本換行(兼容IE, FF和Opera等)

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

Linux installation MySQL tutorial (binary distribution)

Automatic line breaks in html pre tags

Linux installation MySQL tutorial (binary distribution)

Introduction to NFS service construction under Centos7

CSS3 realizes the animation of shuttle starry sky

MySQL Series 14 MySQL High Availability Implementation

Steps to deploy ingress-nginx on k8s

Slot arrangement and usage analysis in Vue

Three ways to prevent MySQL from inserting duplicate data

Keepalived implements Nginx load balancing and high availability sample code

Writing a shell script in Ubuntu to start automatically at boot (recommended)

Example code for implementing the "plus sign" effect with CSS

Recommend

A brief introduction to VUE uni-app basic components

Solution to MySQL server login error ERROR 1820 (HY000)

Nginx configuration file detailed explanation and optimization suggestions guide

N ways to achieve two-column layout with CSS

How to deploy Vue project using Docker image + nginx

CSS multi-column layout solution

Installation process of MySQL5.7.22 on Mac

Detailed explanation of Nest.js parameter validation and custom return data format

How to solve nginx 503 Service Temporarily Unavailable

Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking

What is ssh port forwarding? What's the use?

A brief discussion on JS regular RegExp object

2 reasons why html-css tag style setting does not work

Linux general java program startup script code example

Several ways to set the expiration time of localStorage