Làm cách nào để thay đổi một khoảng để trông giống như một khoảng trước với CSS?

108

Có thể thay đổi <span>thẻ (hoặc <div>) để định dạng trước nội dung của nó giống như <pre>thẻ chỉ sử dụng CSS không?

html css

— jsight
nguồn

164

Nhìn vào Bảng định kiểu mặc định W3C CSS2.1 hoặc Bản nháp làm việc CSS2.2 . Sao chép tất cả các cài đặt cho PRE và đưa chúng vào lớp của riêng bạn.

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

— Diodeus - James MacFarlane
nguồn

1

Bạn nên làm theo cách này để hiểu được nguồn gốc của những giá trị mặc định này.

— Diodeus - James MacFarlane 21/10/08

2

Khi tôi thử điều này, các ngắt dòng không được giữ nguyên.

— Agnel Kurian

Thẻ <pre> sẽ hiển thị thanh cuộn ngang khi văn bản quá rộng, nhưng css này thì không. Có ai biết cách chỉ cho chúng không?

— shindigo

1

@shindigo Bạn đã thử sử dụng overflow: scrollchưa? Hoặc nếu bạn chỉ muốn cuộn theo chiều ngang overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow

— Kanmuri

1

@shindigo overflow: auto;có thể tốt hơn nếu không, bạn có thể kết thúc với hai bộ thanh cuộn khi bạn không cần chúng.

— Spechal

57

Xem thuộc tính CSS khoảng trắng .

.like-pre { white-space: pre; }

— Pistos
nguồn

7

cách khác, bạn có thể thấy white-space: pre-wraphữu ích. Nó hoạt động giống như vậy pre, nhưng bao gồm những hàng dài.

— Kai Carver,

25

Điều này làm cho một SPAN trông giống như một PRE:

span {
  white-space: pre;
  font-family: monospace;
  display: block;
}

Hãy nhớ thay đổi bộ chọn css nếu thích hợp.

— Ông Shiny và Mới 安宇
nguồn

5

Cụ thể, thuộc tính bạn đang xem là:

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

— Sören Kuklau
nguồn

2

Thử cái này

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}

— Yanni
nguồn

1

Hãy thử phong cách này

.pre {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5;   
word-break: break-all;
white-space: pre;
white-space: pre\9; /* IE7+ */
display: block;
}

Được sử dụng giống nhau ở đây - http://www.makemyshop.in/

— Yesu Raj
nguồn

0

Tại sao không chỉ sử dụng thẻ <pre>, thay vì thẻ span? Cả hai đều nội tuyến, vì vậy cả hai nên cư xử theo cách bạn muốn. Nếu bạn gặp sự cố khi ghi đè toàn bộ định nghĩa của <pre>, chỉ cần cấp cho nó một lớp / id.

1

Đôi khi bạn đã có một khoảng trên một trang và không thể thay đổi nó, giống như nếu nó là một phần của hệ thống CMS hiện có.

— Mr. Shiny and New 安宇

B / c khung đang từ chối đưa nội dung theo <pre> của tôi theo cách tôi yêu cầu. Tôi có thể làm việc xung quanh nó, nhưng điều đó khó hơn nhiều so với việc chỉ thiết lập một vài đạo cụ CSS.

— jsight