Làm cách nào để bọc văn bản trong thẻ trước?

pre các thẻ siêu hữu ích cho các khối mã trong HTML và để gỡ lỗi đầu ra trong khi viết tập lệnh, nhưng làm cách nào để tạo văn bản bao bọc văn bản thay vì in ra một dòng dài?

Câu trả lời, từ trang này trong CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    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+ */
}

Điều này hoạt động rất tốt để bọc văn bản và duy trì khoảng trắng trong pre-tag:

pre {
    white-space: pre-wrap;
}

Tôi đã thấy rằng bỏ qua thẻ trước và sử dụng khoảng trắng: gói trước trên div là một giải pháp tốt hơn.

 <div style="white-space: pre-wrap;">content</div>

Một cách ngắn gọn nhất, điều này buộc nội dung phải bọc bên trong thẻ "pre" mà không ngắt từ. Chúc mừng!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

Xem ví dụ trực tiếp tại đây .

Đây là những gì tôi cần. Nó giữ cho các từ không bị phá vỡ nhưng cho phép chiều rộng động trong khu vực trước.

word-break: keep-all;

Tôi đề nghị quên trước và chỉ cần đặt nó trong một textarea.

Việc thụt lề của bạn sẽ vẫn còn và mã của bạn sẽ không bị ngắt dòng ở giữa một đường dẫn hoặc một cái gì đó.

Dễ dàng hơn để chọn phạm vi văn bản trong một khu vực văn bản quá nếu bạn muốn sao chép vào clipboard.

Sau đây là một đoạn trích php, vì vậy nếu bạn không ở dạng php thì cách bạn đóng gói các ký tự đặc biệt html sẽ khác nhau.

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

Để biết thông tin về cách sao chép văn bản vào bảng tạm trong js, hãy xem: Làm cách nào để sao chép vào bảng tạm trong JavaScript? .

Tuy nhiên...

Tôi vừa kiểm tra các khối mã stackoverflow và chúng bọc trong thẻ <code> được bọc trong thẻ <pre> bằng css ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

Ngoài ra, nội dung của các khối mã stackoverflow là cú pháp được tô sáng bằng cách sử dụng (tôi nghĩ) http://code.google.com.vn/p/google-code-prettify/ .

Đó là một thiết lập tốt nhưng bây giờ tôi chỉ đi với textareas.

Tôi đã kết hợp câu trả lời @richelectron và @ user1433454.
Nó hoạt động rất tốt và bảo tồn các định dạng văn bản.

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

Bạn có thể:

pre { white-space: normal; }

để duy trì phông chữ đơn cách nhưng thêm từ-quấn, hoặc:

pre { overflow: auto; }

sẽ cho phép một kích thước cố định với cuộn ngang cho các dòng dài.

Hãy thử sử dụng

<pre style="white-space:normal;">. 

Hoặc tốt hơn là ném CSS.

Sử dụng white-space: pre-wrapvà một số tiền tố để ngắt dòng tự động bên trong pres.

Không sử dụng word-wrap: break-wordbởi vì điều này, tất nhiên, sẽ phá vỡ một nửa từ mà có lẽ là điều bạn không muốn.

Cách trình duyệt chéo tốt nhất giúp tôi có được ngắt dòng và hiển thị mã hoặc văn bản chính xác: (chrome, trình duyệt internet, Firefox)

CSS:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>

Sau đây đã giúp tôi:

pre {
    white-space: normal;
    word-wrap: break-word;
}

Cảm ơn

Các <pre>-Element viết tắt của "trước định dạng văn bản" và được thiết kế để giữ cho các định dạng của văn bản (hoặc bất kỳ) giữa các thẻ của nó. Do đó, nó thực sự không có ý định tự động ngắt dòng hoặc ngắt dòng trong <pre>-Tag

Văn bản trong một phần tử được hiển thị theo phông chữ có chiều rộng cố định (thường là Chuyển phát nhanh) và nó giữ nguyên cả khoảng trắng và ngắt dòng .

nguồn: w3schools.com , nhấn mạnh được thực hiện bởi chính tôi.