ข้อความที่จัดรูปแบบไว้ล่วงหน้าคืออะไร?

ต่อไปนี้คือการใช้แท็กข้อความที่จัดรูปแบบไว้ล่วงหน้าในโค้ด HTML ของคุณ

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

ข้อความ HTML จะแบ่งบรรทัดที่ต้องการเมื่อถึงจุดสิ้นสุดของพื้นที่ที่มีอยู่ ในท้ายที่สุดเบราว์เซอร์มีบทบาทมากขึ้นในการกำหนดว่าข้อความแบ่งมากกว่าที่คุณทำอย่างไร

ในแง่ของการเพิ่มระยะเว้นวรรคเพื่อสร้างรูปแบบหรือเค้าโครงบางรูปแบบ HTML ไม่รู้จักระยะห่างที่เพิ่มลงในโค้ดซึ่งรวมถึงการเว้นวรรคแถบแท็บหรือการรับส่งของ หากคุณเว้นช่องว่างระหว่างคำหนึ่งและคำที่มาหลังจากนั้นเบราว์เซอร์จะแสดงพื้นที่เพียงหนึ่งเดียวที่นั่น นี้เรียกว่าการยุบพื้นที่สีขาวและเป็นจริงหนึ่งในแนวคิดของ HTML ที่ใหม่มากในการต่อสู้กับอุตสาหกรรมในตอนแรก พวกเขาคาดหวังว่าช่องว่างของ HTML จะทำงานได้ตามที่ปรากฏในโปรแกรมเช่น Microsoft Word แต่นั่นไม่ใช่วิธีที่ HTML ทำงานได้ทั้งหมด

ในกรณีส่วนใหญ่การจัดการข้อความตามปกติในเอกสาร HTML คือสิ่งที่คุณต้องการ แต่ในกรณีอื่น ๆ คุณอาจต้องการควบคุมได้มากขึ้นว่าช่องว่างของข้อความจะอยู่ตรงไหนและจะแบ่งเส้นออกได้อย่างไร

ข้อความนี้รู้จักในรูปแบบที่จัดรูปแบบไว้ล่วงหน้า (กล่าวคือคุณกำหนดรูปแบบ) คุณสามารถเพิ่มข้อความที่จัดรูปแบบไว้ล่วงหน้าลงในหน้าเว็บของคุณโดยใช้แท็ก HTML pre

ใช้

 แท็ก 

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

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

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

นี่เป็นวิธีหนึ่งที่จะใช้แท็ก HTML

: 

 
 Twas brillig และ slithey toves มี gyre และ gimble ใน wabe  
 HTML ทั่วไปยุบพื้นที่สีขาวในเอกสาร ซึ่งหมายความว่าการส่งคืนช่องว่างและอักขระแท็บที่ใช้ในข้อความนี้จะถูกยุบทั้งหมดลงในช่องว่างหนึ่งรายการ หากคุณพิมพ์ข้อความข้างต้นลงในแท็ก HTML ทั่วไปเช่นแท็ก p (paragraph) คุณจะท้ายบรรทัดข้อความเช่น: 
 Twas brillig และ slithey toves มี gyre และ gimble ใน wabe 
 แท็กก่อนออกจากตัวอักษรพื้นที่สีขาวตามเดิม ดังนั้นการเว้นวรรคช่องว่างและแท็บทั้งหมดจึงถูกเก็บรักษาไว้ในการแสดงผลเนื้อหาของเบราเซอร์ การใส่เครื่องหมายคำพูดลงในแท็กก่อนสำหรับข้อความเดียวกันจะส่งผลให้เกิดการแสดงผลนี้: 
 Twas brillig และ slithey toves มี gyre และ gimble ใน wabe 
 เกี่ยวกับแบบอักษร 
 แท็กก่อนทำมากกว่าเพียงแค่รักษาช่องว่างและตัวแบ่งสำหรับข้อความที่คุณเขียน ในเบราว์เซอร์ส่วนใหญ่จะมีการเขียนด้วยอักษรแบบอักษรเดียว ซึ่งจะทำให้ตัวอักษรในข้อความมีความกว้างเท่ากับ กล่าวอีกนัยหนึ่งจดหมายที่ฉันใช้พื้นที่เป็นตัวอักษร w 
 หากคุณต้องการใช้แบบอักษรอื่นแทนที่ปริยายที่คุณเปิดใช้งานเบราว์เซอร์คุณจะสามารถเปลี่ยนแปลงแบบนี้ได้ด้วยสไตล์ชีตและเลือก แบบอักษรอื่นที่คุณต้องการให้แสดงผล 
 HTML5 
 สิ่งหนึ่งที่ต้องคำนึงถึงคือใน HTML5 แอตทริบิวต์ "width" ไม่ได้รับการสนับสนุนสำหรับองค์ประกอบ 
 อีกต่อไป ใน HTML 4.01 ความกว้างระบุจำนวนอักขระที่บรรทัดจะมี แต่ค่านี้ลดลงสำหรับ HTML5 ขึ้นไป 

 แก้ไขโดย Jeremy Girard เมื่อ 2/2/17