3 วิธีในการแทรกช่องว่างใน HTML

2025 ผู้เขียน: Jason Gerald | [email protected]. แก้ไขล่าสุด: 2025-01-23 12:49

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

ขั้นตอน

วิธีที่ 1 จาก 3: การใช้โค้ด HTML

ขั้นตอนที่ 1 เปิดเอกสาร HTML

คุณสามารถแก้ไขเอกสาร HTML โดยใช้โปรแกรมแก้ไขข้อความ เช่น Notepad หรือ TextEdit บน Windows คุณยังสามารถใช้โปรแกรมแก้ไข HTML เช่น Adobe Dreamweaver ทำตามขั้นตอนเหล่านี้เพื่อเปิดเอกสาร HTML

• ค้นหาเอกสาร HTML ใน File Explorer บนคอมพิวเตอร์ Windows (หรือ Finder บน Mac)
• คลิกขวาที่เอกสาร HTML ที่คุณต้องการแก้ไข
• วางเมาส์เหนือตัวเลือก " เปิดด้วย ”.
• คลิกโปรแกรมที่คุณต้องการใช้เพื่อแก้ไขไฟล์

ขั้นตอนที่ 2 กดแป้นเว้นวรรคเพื่อเพิ่มช่องว่างปกติ

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

ขั้นตอนที่ 3 พิมพ์เพื่อบังคับให้เพิ่มช่องว่างต่อท้าย

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

• เช่น พิมพ์ สวัสดีทุกคน! เพื่อแทรกช่องว่างพิเศษระหว่างคำว่า "สวัสดี" และ "ทุกคน!"
• หากคุณใช้อักขระเหล่านี้มากเกินไป เบราว์เซอร์ของคุณจะมีปัญหาในการแทรกตัวแบ่งบรรทัดในลักษณะที่เรียบร้อยและอ่านง่าย
• คุณยังสามารถพิมพ์เพื่อบังคับเว้นวรรคได้

ขั้นตอนที่ 4 แทรกช่องว่างที่มีความกว้างต่างๆ

คุณสามารถเพิ่มพื้นที่ว่างให้ยาวขึ้นได้โดยใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้:

• สองช่องว่าง – Type
• สี่ช่องว่าง – Type
• เยื้อง – Type

วิธีที่ 2 จาก 3: การใช้โค้ด CSS

ขั้นตอนที่ 1 เปิดเอกสาร HTML หรือ CSS

โค้ด CSS สามารถใช้กับส่วนหัวของเอกสาร HTML หรือเขียนเป็นเอกสาร CSS ภายนอกได้

ส่วนหัวของเอกสาร HTML อยู่ที่ด้านบนของไฟล์ ส่วนนี้อยู่ระหว่างเครื่องหมาย "" และ ""

ขั้นตอนที่ 2 สร้างกลุ่มสไตล์สำหรับโค้ด CSS

ต้องเพิ่มส่วนสไตล์ที่ส่วนหัวของโค้ด HTML หรือในสไตล์ชีตแยกต่างหาก ใช้แฟล็กต่อไปนี้เพื่อสร้างเซ็กเมนต์สไตล์ในเอกสาร HTML หรือสไตล์ชีตแยกต่างหาก

• พิมพ์เพื่อเปิดส่วนสไตล์ ต้องเพิ่มโค้ด CSS ทั้งหมดหลังจากเครื่องหมายนี้
• พิมพ์เพื่อปิดส่วนสไตล์ ต้องป้อนโค้ด CSS ทั้งหมดก่อนเครื่องหมายปิดนี้

ขั้นตอนที่ 3 พิมพ์สิ่งต่อไปนี้ลงในส่วนสไตล์: p {text-indent: 5em;}. การตั้งค่าสถานะนี้บอกให้เบราว์เซอร์เยื้องช่องว่างห้าช่องเมื่อเพิ่มลงในโค้ด HTML ที่เหมาะสม

• คุณปรับจำนวนหรือความกว้างของช่องว่างได้โดยพิมพ์ตัวเลขอื่นหลังโค้ด "text-indent:"
• หน่วย " em " เท่ากับหนึ่งช่องว่างที่ขนาดแบบอักษรที่ระบุหรือที่ใช้บังคับ คุณสามารถใช้หน่วยอื่นๆ เช่น เปอร์เซ็นต์ (เช่น " text-indent: 15%; ") หรือหน่วยความยาว (เช่น " text-indent: 3mm; ")

ขั้นตอนที่ 4 Tikka

ในส่วนที่คุณต้องการเยื้องเข้า

ต้องเพิ่มเครื่องหมายนี้ในเนื้อหาของ HTML ก่อนข้อความที่คุณต้องการเยื้อง หลังจากนั้นการเยื้องตามข้อกำหนดที่ระบุในโค้ด CSS จะถูกเพิ่มลงในข้อความ

วิธีที่ 3 จาก 3: การใช้ข้อความที่จัดรูปแบบไว้ล่วงหน้า

ขั้นตอนที่ 1 เปิดเอกสาร HTML

คุณสามารถแก้ไขเอกสาร HTML โดยใช้โปรแกรมแก้ไขข้อความ เช่น Notepad หรือ TextEdit บน Windows คุณยังสามารถใช้โปรแกรมแก้ไข HTML เช่น Adobe Dreamweaver ทำตามขั้นตอนเหล่านี้เพื่อเปิดเอกสาร HTML

• ค้นหาเอกสาร HTML ใน File Explorer บนคอมพิวเตอร์ Windows (หรือ Finder บน Mac)
• คลิกขวาที่เอกสาร HTML ที่คุณต้องการแก้ไข
• วางเมาส์เหนือตัวเลือก " เปิดด้วย ”.
• คลิกโปรแกรมที่คุณต้องการใช้เพื่อแก้ไขไฟล์

ขั้นตอนที่ 2. พิมพ์

ก่อนข้อความที่คุณต้องการจัดรูปแบบล่วงหน้า

รหัสนี้เป็นโทเค็นการเปิดข้อความที่จัดรูปแบบไว้ล่วงหน้า





ขั้นตอนที่ 3 พิมพ์ข้อความที่ต้องการหลังจาก"
".

ด้วยการจัดรูปแบบล่วงหน้า ช่องว่างและตัวแบ่งบรรทัดทั้งหมดที่สร้างโดยใช้ปุ่ม " Enter " จะแสดงในหน้า HTML





ขั้นตอนที่ 4. พิมพ์ หลังจากข้อความ
ส่วนข้อความที่จัดรูปแบบไว้ล่วงหน้าจะสิ้นสุด

เคล็ดลับ

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


คำเตือน


อักขระ HTML สำหรับ Tab

	

ไม่ทำงานอย่างที่คุณคาดหวัง เอกสาร HTML มาตรฐานไม่มีการหยุดการจัดตาราง ดังนั้นอักขระเหล่านั้นจะไม่ทำงาน
เขียนโค้ด HTML ของคุณในโปรแกรมแก้ไขโค้ดหรือไฟล์ข้อความธรรมดาเสมอ ไม่ใช่ในรูปแบบไฟล์ประมวลผลคำ (เช่น Word)