Renderuj ciąg znaków w HTML i zachowaj spacje oraz podziały wierszy

232

Mam aplikację MVC3 ze stroną ze szczegółowymi informacjami. W ramach tego mam opis (pobrany z bazy danych), który zawiera spacje i nowe wiersze. Podczas renderowania nowe wiersze i spacje są ignorowane przez HTML. Chciałbym zakodować te spacje i nowe wiersze, aby nie były ignorowane.

Jak to robisz?

Próbowałem HTML.Encode, ale skończyło się na wyświetleniu kodowania (nawet nie na spacjach i nowych wierszach, ale na niektórych innych znakach specjalnych)

Dan kropka netto
źródło
W szczególności z CSS: stackoverflow.com/questions/1011641/…
Ciro Santilli 15 冠状 病 六四 事件 法轮功

Odpowiedzi:

544

Po prostu stylizuj zawartość za pomocą 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>

pete
źródło
1
+1 To rozwiązanie jest czyste i polecam użycie metody SecurityElement.Escape .
Ryan Gates,
@ user941632: Musisz mieć jakiś inny styl uniemożliwiający jego działanie. Działa to tutaj: jsfiddle.net/VwGSf/64
pete
43
white-space: pre-line;jeśli nie chcesz wcięcia pierwszego wiersza każdego akapitu.
Will Schoenberger,
4
To jest stary bilet, ale warto dodać odniesienie, takie jak MDN, aby wyjaśnić, na czym polega zatwierdzona odpowiedź :)
Phil D.
a jeśli nadal nie wygląda tak, jak chcesz, sprawdź białą przestrzeń między elementami HTML (lub rzeczą, która je generuje - na przykład szablon vue) ...
Yordan Georgiev
43

próbowałeś użyć <pre>tagu.

http://jsfiddle.net/NweRa/

N30
źródło
4
To wyświetla wartość czcionką o stałej szerokości
Dan kropka
3
możesz użyć css, aby zmienić styl. właśnie napisałem naprawdę prosty przykład. możesz użyć znacznika <pre> lub css zgodnie z odpowiedzią @ pete.
N30,
19

Możesz użyć białych znaków : przed wierszem, aby zachować przerwy w formatowaniu. Nie ma potrzeby ręcznego wstawiania elementów HTML.

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

lub dodaj do elementu HTML style="white-space: pre-line;"

rafalkasa
źródło
7

Co chcesz zamienić wszystkie spacje z &amp;nbsp;(non-breaking space) i wszystkie nowe linie \nz <<b></b>br>(podział wiersza w HTML). To powinno osiągnąć wynik, którego szukasz.

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

Coś z tej natury.

Deweloper
źródło
To by działało, myślę, że myślałem, że będzie coś wbudowanego. Może przesadzam.
Dan kropka netto
Z tego, co widziałem, nie ma, ale zwykłe zastąpienie nie jest zbyt duże. Nie sądzę, żeby wydajność była problemem.
Deweloper
Myślę, że „problem” z MVC polega na tym, że jeśli zmienię ciąg, jak sugerujesz, wyświetli się „& nbsp;” zamiast spacji, chyba że użyję @ Html.Raw (). Potem muszę się martwić o xss i użytkownika wprowadzającego zły HTML. Mógłbym jednak zakodować ciągi znaków na wstawce, aby mniej się tym martwić.
Dan kropka netto
4

Próbowałem white-space: pre-wrap;techniki podanej przez Pete'a, ale jeśli sznurek był ciągły i długi, po prostu zabrakło mu pojemnika i nie wypaczał się z jakiegokolwiek powodu, nie miałam dużo czasu na zbadanie ... ale jeśli ty też masz ten sam problem, skończyło się na użyciu <pre>tagów i następującego css i wszystko było dobrze iść.

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}
Mohd Abdul Mujib
źródło
1

Jak wspomniałeś w odpowiedzi @Developer, prawdopodobnie kodowałbym HTML po wprowadzeniu przez użytkownika. Jeśli martwisz się o XSS, prawdopodobnie nigdy nie potrzebujesz danych użytkownika w jego oryginalnej formie, więc równie dobrze możesz uciec przed nim (i zastąpić spacje i znaki nowej linii, gdy jesteś przy nim).

Zauważ, że ucieczka przy wejściu oznacza, że ​​powinieneś użyć @ Html.Raw lub utworzyć MvcHtmlString, aby wyrenderować to konkretne wejście.

Możesz także spróbować

System.Security.SecurityElement.Escape(userInput)

ale myślę, że też nie ucieknie ze spacji. W takim przypadku proponuję zrobić .NET

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

na podstawie danych wprowadzonych przez użytkownika. A jeśli chcesz bardziej zagłębić się w użyteczność, być może możesz wykonać analizę XML danych wejściowych użytkownika (lub grać z wyrażeniami regularnymi), aby zezwolić tylko na wstępnie zdefiniowany zestaw tagów. Na przykład zezwól

<p>, <span>, <strong>

... ale nie pozwalają

<script> or <iframe>
Mauricio Morales
źródło
0

Zawiń opis w textareaelemencie.

oneuv
źródło
0

Jest na to prosty sposób. Wypróbowałem to na mojej aplikacji i działało całkiem dobrze.

Wystarczy wpisać: $ text = $ row ["text"]; echo nl2br ($ text);

emma4040
źródło