Render string dalam HTML dan pertahankan spasi dan linebreak


233

Saya memiliki aplikasi MVC3 yang memiliki halaman detail. Sebagai bagian dari itu saya memiliki deskripsi (diambil dari db) yang memiliki spasi dan baris baru. Ketika itu diberikan baris dan spasi baru diabaikan oleh html. Saya ingin menyandikan spasi dan baris baru tersebut agar tidak diabaikan.

Bagaimana kamu melakukannya?

Saya mencoba HTML.Encode tetapi akhirnya menampilkan encoding (dan bahkan tidak pada spasi dan baris baru tetapi pada beberapa karakter khusus lainnya)


Jawaban:


546

Cukup gaya konten dengan white-space: pre-wrap;.

div {
    white-space: pre-wrap;
}
<div>
This is some text   with some extra spacing    and a
few newlines along with some trailing spaces        
     and five leading spaces thrown in
for                                              good
measure                                              
</div>


1
+1 Solusi ini bersih, dan saya akan merekomendasikan menggunakan Metode SecurityElement.Escape dengannya.
Ryan Gates

@ user941632: Anda harus memiliki gaya lain yang mencegahnya berfungsi. Ia bekerja dalam rentang waktu di sini: jsfiddle.net/VwGSf/64
pete

44
white-space: pre-line;jika Anda tidak ingin baris pertama dari setiap paragraf berlekuk.
Will Schoenberger

4
Ini adalah tiket lama tetapi mungkin masih bermanfaat menambahkan referensi seperti MDN untuk membantu menjelaskan apa yang dilakukan jawaban yang disetujui :)
Phil D.

dan jika masih tidak terlihat seperti yang Anda inginkan, periksa ruang putih antara elemen html Anda (atau benda yang menghasilkannya - misalnya templat vue) ...
Yordan Georgiev

43

sudahkah Anda mencoba menggunakan <pre>tag.

http://jsfiddle.net/NweRa/


4
Itu menampilkan nilai dalam font lebar tetap
Dan dot net

3
Anda dapat menggunakan css untuk mengubah gaya. Saya baru saja menulis contoh yang sangat mendasar. Anda dapat menggunakan tag <pre> atau menggunakan css sesuai jawaban @ pete.
N30

20

Anda dapat menggunakan white-space: pre-line untuk mempertahankan jeda baris dalam format. Tidak perlu memasukkan elemen html secara manual.

.popover {
    white-space: pre-line;    
}

atau tambahkan ke elemen html Anda style="white-space: pre-line;"


7

Anda ingin mengganti semua spasi dengan &amp;nbsp;( spasi non-putus) dan semua baris baru \ndengan <<b></b>br>(putus baris dalam html). Ini harus mencapai hasil yang Anda cari.

body = body.replace(' ', &amp;nbsp;).replace('\n', '<<b></b>br>');

Sesuatu dari sifat itu.


Itu akan berhasil, saya kira saya berpikir akan ada sesuatu yang tertanam di dalamnya. Mungkin saya terlalu memikirkannya.
Dan dot net

Sejauh yang saya lihat tidak ada, tidak banyak overhead untuk melakukan penggantian yang sederhana sekalipun. Saya tidak berpikir kinerja akan menjadi masalah.
Pengembang

Saya kira 'masalah' dengan MVC adalah bahwa jika saya mengubah string seperti yang Anda sarankan itu akan menampilkan '& nbsp;' alih-alih spasi, kecuali saya menggunakan @ Html.Raw (). Maka saya harus khawatir tentang xss dan pengguna memasukkan html buruk. Namun saya bisa menyandikan string pada insert sehingga saya bisa kurang peduli tentang itu.
Dan dot net

4

Saya sedang mencoba white-space: pre-wrap;teknik yang dinyatakan oleh pete tetapi jika string itu terus menerus dan panjang itu hanya kehabisan wadah, dan tidak melengkung karena alasan apa pun, tidak punya banyak waktu untuk menyelidiki .. tetapi jika Anda juga memiliki masalah yang sama, saya akhirnya menggunakan <pre>tag dan css berikut dan semuanya baik-baik saja ..

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}

1

Seperti yang Anda sebutkan pada jawaban @Developer, saya mungkin akan menyandikan HTML pada input pengguna. Jika Anda khawatir tentang XSS, Anda mungkin tidak pernah membutuhkan input pengguna dalam bentuk aslinya, jadi Anda mungkin bisa menghindarinya (dan ganti spasi dan baris baru saat Anda menggunakannya).

Perhatikan bahwa keluar dari input berarti Anda harus menggunakan @ Html.Raw atau membuat MvcHtmlString untuk membuat input tertentu.

Anda juga bisa mencoba

System.Security.SecurityElement.Escape(userInput)

tapi saya pikir itu tidak akan lepas ruang juga. Jadi dalam hal ini, saya sarankan lakukan saja. NET

System.Security.SecurityElement.Escape(userInput).Replace(" ", "&nbsp;").Replace("\n", "<br>")

pada input pengguna. Dan jika Anda ingin menggali lebih dalam tentang kegunaan, mungkin Anda dapat melakukan parsing XML dari input pengguna (atau bermain dengan ekspresi reguler) untuk hanya mengizinkan satu set tag yang telah ditentukan. Misalnya, izinkan

<p>, <span>, <strong>

... tapi jangan izinkan

<script> or <iframe>


0

Ada cara sederhana untuk melakukannya. Saya mencobanya di aplikasi saya dan itu bekerja dengan cukup baik.

Cukup ketik: $ text = $ row ["text"]; echo nl2br ($ text);

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.