Bagaimana cara mengubah span agar terlihat seperti pra dengan CSS?

108

Apakah mungkin untuk mengubah <span>tag (atau <div>) untuk memformat kontennya seperti <pre>tag yang hanya menggunakan CSS?

html css

— jsight
sumber

164

Lihat W3C CSS2.1 Default Style Sheet atau CSS2.2 Working Draft . Salin semua pengaturan PRE dan taruh di kelas Anda sendiri.

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

— Diodeus - James MacFarlane
sumber

1

Sebaiknya lakukan dengan cara ini untuk memahami dari mana default ini berasal.

— Diodeus - James MacFarlane

2

Ketika saya mencoba ini, jeda baris tidak dipertahankan.

— Agnel Kurian

Tag <pre> akan menampilkan scrollbar horizontal ketika teks terlalu lebar, tetapi css ini tidak. Ada yang tahu cara menunjukkannya?

— shindigo

1

@shindigo Sudahkah Anda mencoba menggunakan overflow: scroll? Atau jika Anda hanya ingin overflow-x: scroll pengembang

— Kanmuri

1

@shindigo overflow: auto;mungkin lebih baik jika tidak, Anda mungkin akan mendapatkan dua set scrollbar saat Anda tidak membutuhkannya.

— Pidato

57

Lihat properti CSS spasi putih .

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

— Pistos
sumber

7

alternatifnya, Anda mungkin akan white-space: pre-wrapberguna. Ini berperilaku seperti pre, tetapi membungkus garis panjang.

— Kai Carver

25

Ini membuat SPAN terlihat seperti PRE:

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

Ingatlah untuk mengubah pemilih css sebagaimana mestinya.

— Tuan Shiny dan Baru 安宇
sumber

5

Secara khusus, properti yang Anda lihat adalah:

white-space: pre

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

— Sören Kuklau
sumber

2

Coba ini

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

— Yanni
sumber

1

Coba gaya ini

.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;
}

Digunakan sama di sini - http://www.makemyshop.in/

— Yesu Raj
sumber

0

Mengapa tidak menggunakan tag <pre> saja, bukan tag span? Keduanya sejajar, jadi keduanya harus berperilaku sesuai keinginan Anda. Jika Anda memiliki masalah saat menimpa seluruh definisi <pre>, berikan saja kelas / id.

1

Terkadang Anda sudah memiliki span pada halaman dan tidak dapat mengubahnya, seperti jika itu adalah bagian dari sistem CMS yang sudah ada.

— Mr. Shiny and New 安宇

B / c kerangka kerja menolak untuk meletakkan konten di bawah <pre> saya seperti yang saya minta. Saya bisa mengatasinya, tapi itu jauh lebih sulit daripada hanya mengatur beberapa alat peraga CSS.

— jsight