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

Jawaban:

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


sumber
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