HTML로 문자열 렌더링 및 공백 및 줄 바꿈 보존

HTML로 문자열 렌더링 및 공백 및 줄 바꿈 보존

저는 상세 페이지가 있는 MVC3 앱을 가지고 있습니다.그 일환으로 공백과 새 줄이 있는 설명(db에서 검색)이 있습니다.렌더링되면 html에서 새 줄과 공백이 무시됩니다.저는 그 공간들과 새로운 선들이 무시되지 않도록 인코딩하고 싶습니다.

어떻게 하죠?

HTML.Encode를 시도해 보았지만 (그리고 공백과 새 줄뿐만 아니라 다른 특수 문자에도) 인코딩이 표시되었습니다.

내용을 사용하여 스타일을 지정합니다.

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>

사용해 보셨습니까?<pre>꼬리표를 매다

 <pre>
    
    Text with
    
    multipel line breaks embeded between pre tag
    
    will work    and 
       also tabs..will work
    
it will preserve the formatting..
    </pre>

white-space: pre-line을 사용하여 줄 바꿈을 포맷에 보존할 수 있습니다.html 요소를 수동으로 삽입할 필요가 없습니다.

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

또는 html 요소에 추가합니다.style="white-space: pre-line;"

모든 공백을 다음과 같이 바꿉니다. (단절되지 않는 공간) 및 모든 새 줄\n와 함께<br>(html의 줄 바꿈).이렇게 하면 원하는 결과를 얻을 수 있습니다.

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

그런 성격의 뭔가.

나는 시도하고 있었습니다.white-space: pre-wrap;피트가 말한 기술이지만 끈이 연속적이고 길면 용기 밖으로 빠져나가고 어떤 이유로든 뒤틀리지 않아 조사할 시간이 많지 않았습니다.하지만 당신도 같은 문제를 가지고 있다면, 저는 결국 그 문제를 사용하게 되었습니다.<pre>tags와 다음의 css 그리고 모든것이 잘 되었습니다..

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

당신이 @Developer의 답변에서 언급하신 것처럼, 저는 아마도 사용자 입력에 대해 HTML로 인코딩할 것입니다.XSS가 걱정되는 경우 원래 형태로 사용자의 입력이 필요하지 않을 수 있으므로 사용자가 XSS를 사용하는 동안 공백과 줄을 바꾸는 것이 좋습니다.

입력 시 탈출하면 @Html을 사용해야 합니다.해당 특정 입력을 렌더링하기 위해 MvcHtmlString을 원시 또는 생성합니다.

시도해 볼 수도 있습니다.

System.Security.SecurityElement.Escape(userInput)

하지만 공간을 벗어나지도 못할 것 같습니다.그래서 그런 경우에는 그냥 .NET을 하는 것을 제안합니다.

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

사용자 입력에 따라그리고 사용성에 대해 더 자세히 알고 싶다면, 미리 정의된 태그 집합만 허용하도록 사용자 입력(또는 정규식으로 재생)의 XML 구문 분석을 수행할 수도 있습니다.예를 들어 허용합니다.

<p>, <span>, <strong>

... 하지만 허락하지는

<script> or <iframe>

div 태그를 사용하는 대신 줄 바꿈을 보존하는 div 태그 안에 p 태그를 사용합니다.

하지만 사용해야 할 경우에는 다음 코드에서 영감을 얻을 수 있습니다.

<script>
  $( document ).ready(function() {
    var str = $("body").html();
    var regex = /[\n]/g;
    $("body").html(str.replace(regex, "<br>"));
  });
</script>

언급URL : https://stackoverflow.com/questions/9492249/render-a-string-in-html-and-preserve-spaces-and-linebreaks