แสดงผลสตริงใน HTML และรักษาช่องว่างและการแบ่งบรรทัด


232

ฉันมีแอป MVC3 ที่มีหน้ารายละเอียด เป็นส่วนหนึ่งของที่ฉันมีคำอธิบาย (ดึงจาก db) ที่มีช่องว่างและบรรทัดใหม่ เมื่อมีการแสดงผลบรรทัดใหม่และช่องว่างจะถูกละเว้นโดย html ฉันต้องการเข้ารหัสช่องว่างและบรรทัดใหม่เพื่อไม่ให้ถูกละเว้น

คุณจะทำอย่างไร

ฉันลอง HTML.Encode แต่มันก็จบลงด้วยการแสดงการเข้ารหัส (และไม่ได้แม้แต่ในช่องว่างและบรรทัดใหม่ แต่ในอักขระพิเศษอื่น ๆ )


คำตอบ:


544

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 วิธีนี้สะอาดและฉันขอแนะนำให้ใช้SecurityElement.Escape วิธีด้วย
Ryan Gates

@ user941632: คุณต้องมีสไตล์อื่นป้องกันไม่ให้ทำงานได้ มันทำงานในช่วงที่นี่: jsfiddle.net/VwGSf/64
pete

43
white-space: pre-line;หากคุณไม่ต้องการให้บรรทัดแรกของแต่ละย่อหน้าเยื้อง
Will Schoenberger

4
นี้เป็นตั๋วเก่า แต่ก็ยังอาจจะคุ้มค่าการเพิ่มการอ้างอิงเช่นMDNช่วยอธิบายสิ่งที่เป็นคำตอบที่ได้รับการอนุมัติจะทำ :)
ฟิลดี

และถ้ามันยังไม่ได้ดูวิธีที่คุณต้องการให้ตรวจสอบช่องว่างระหว่างองค์ประกอบ html ของคุณ (หรือสิ่งที่สร้างพวกเขา - เช่นแม่แบบ vue) ...
Yordan Georgiev

43

คุณลองใช้<pre>แท็กแล้วหรือยัง

http://jsfiddle.net/NweRa/


4
ที่แสดงค่าในแบบอักษรความกว้างคงที่
Dan dot net

3
คุณสามารถใช้ CSS เพื่อเปลี่ยนสไตล์ ฉันเพิ่งเขียนตัวอย่างพื้นฐานจริงๆ คุณสามารถใช้แท็ก <pre> หรือใช้ css ตามคำตอบของ @ pete
N30

19

คุณสามารถใช้white-space: pre-lineเพื่อรักษาตัวแบ่งบรรทัดในการจัดรูปแบบ ไม่จำเป็นต้องแทรกองค์ประกอบ HTML ด้วยตนเอง

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

หรือเพิ่มองค์ประกอบ html ของคุณ style="white-space: pre-line;"


7

คุณต้องการแทนที่ช่องว่างทั้งหมดด้วย&amp;nbsp;( ช่องว่างแบบไม่แบ่ง) และบรรทัดใหม่ทั้งหมด\nด้วย<<b></b>br>(ตัวแบ่งบรรทัดเป็น html) สิ่งนี้ควรบรรลุผลที่คุณต้องการ

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

บางสิ่งในธรรมชาตินั้น


ฉันคิดว่าฉันกำลังคิดว่าจะมีบางอย่างในตัวบางทีฉันอาจจะคิดมากเกินไป
Dan dot net

เท่าที่ฉันเคยเห็นมันไม่ได้มีค่าใช้จ่ายมากที่จะทำแทนง่าย ฉันไม่คิดว่าประสิทธิภาพจะเป็นปัญหา
นักพัฒนา

ฉันเดาว่า 'ปัญหา' กับ MVC คือถ้าฉันเปลี่ยนสตริงตามที่คุณแนะนำมันจะแสดง '& nbsp;' แทนที่จะเว้นวรรคยกเว้นฉันใช้ @ Html.Raw () ถ้าอย่างนั้นฉันจะต้องกังวลเกี่ยวกับ xss และผู้ใช้ป้อน HTML ที่ไม่ดี อย่างไรก็ตามฉันสามารถเข้ารหัสสตริงในส่วนแทรกเพื่อที่ฉันจะได้เป็นห่วงน้อยลง
Dan dot net

4

ฉันลองใช้white-space: pre-wrap;เทคนิคที่ระบุโดย pete แต่ถ้าสายยาวต่อเนื่องและนานมันก็วิ่งออกจากภาชนะและไม่ได้บิดด้วยเหตุผลใด ๆไม่มีเวลามากในการตรวจสอบ .. แต่ถ้าคุณมี ปัญหาเดียวกันฉันลงเอยด้วยการใช้<pre>แท็กและ CSS ต่อไปนี้และทุกอย่างก็ดีไป ..

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

1

ตามที่คุณพูดถึงคำตอบของ @Developer ฉันอาจเข้ารหัส HTML ในอินพุตของผู้ใช้ หากคุณกังวลเกี่ยวกับ XSS คุณอาจไม่จำเป็นต้องป้อนข้อมูลของผู้ใช้ในรูปแบบดั้งเดิมดังนั้นคุณอาจหลบหนีได้ (และแทนที่ช่องว่างและบรรทัดใหม่ในขณะที่คุณอยู่ที่นี่)

โปรดทราบว่าการหลีกเลี่ยงการป้อนข้อมูลหมายความว่าคุณควรใช้ @ Html.Raw หรือสร้าง MvcHtmlString เพื่อแสดงการป้อนข้อมูลนั้น

คุณสามารถลอง

System.Security.SecurityElement.Escape(userInput)

แต่ฉันคิดว่ามันจะไม่หนีช่องว่างเช่นกัน ดังนั้นในกรณีนี้ฉันขอแนะนำให้ใช้. NET

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

ในการป้อนข้อมูลของผู้ใช้ และหากคุณต้องการเจาะลึกการใช้งานบางทีคุณสามารถแยกวิเคราะห์ XML ของอินพุตของผู้ใช้ (หรือเล่นกับนิพจน์ทั่วไป) เพื่ออนุญาตเฉพาะชุดแท็กที่กำหนดไว้ล่วงหน้า ตัวอย่างเช่นอนุญาต

<p>, <span>, <strong>

... แต่ไม่อนุญาต

<script> or <iframe>


0

มีวิธีง่าย ๆ ในการทำ ฉันลองในแอพแล้วก็ใช้งานได้ดี

เพียงพิมพ์: $ text = $ row ["text"]; echo nl2br ($ text);

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.