0Pricing
CSS Academy · บทเรียน

การจัดแนว การตกแต่ง และระยะห่างข้อความ

จัดแนวข้อความ เพิ่มเส้นใต้หรือขีดฆ่า และควบคุมระยะห่างระหว่างตัวอักษรกับบรรทัด

การจัดแนว การตกแต่ง และระยะห่างข้อความ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

การจัดแนวข้อความ

text-align ควบคุมการจัดแนวแนวนอนของเนื้อหาแบบอินไลน์ภายในคอนเทนเนอร์แบบบล็อก

<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>

การจัดแนวข้อความแบบเต็มบรรทัด

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

<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>

การตกแต่งข้อความ

text-decoration เพิ่มเส้นให้กับข้อความ โดยมักใช้ขีดเส้นใต้ลิงก์หรือขีดฆ่าเนื้อหาที่ลบแล้ว

<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>

คุณสมบัติการตกแต่งข้อความแบบแยกส่วน

text-decoration เป็นชวเลขสำหรับเส้น รูปแบบ สี และความหนา:

<a href="#">Wavy red underline link</a>

การแปลงรูปแบบข้อความ

text-transform เปลี่ยนรูปแบบตัวพิมพ์ของข้อความโดยไม่แก้ไข HTML ต้นฉบับ:

<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>

การเยื้องข้อความ

text-indent เยื้องบรรทัดแรกขององค์ประกอบแบบบล็อก ใช้ค่าติดลบพร้อมกับระยะห่างภายในที่สอดคล้องกันเพื่อซ่อนข้อความอย่างเข้าถึงได้ (การแทนที่รูปภาพ)

<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>

การจัดการช่องว่าง

white-space ควบคุมวิธีจัดการช่องว่างและการขึ้นบรรทัดใหม่ใน HTML ต้นฉบับ:

  • normal — ยุบช่องว่างและตัดบรรทัดตามคำ
  • nowrap — ป้องกันการตัดบรรทัด
  • pre — คงช่องว่างไว้และไม่ตัดบรรทัด
  • pre-wrap — คงช่องว่างไว้และอนุญาตให้ตัดบรรทัด
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
  return true;
}</pre>

ระยะห่างระหว่างตัวอักษร

letter-spacing กำหนดช่องว่างเพิ่มเติมระหว่างอักขระ ค่าบวกจะทำให้รูปอักขระห่างกัน ส่วนค่าลบจะทำให้รูปอักขระชิดกัน ใช้ em เพื่อให้ปรับขนาดตามสัดส่วน

<p class="spaced">spaced heading text</p>

ระยะห่างระหว่างคำ

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

<h1>Word Spaced Heading Example</h1>

จุดไข่ปลาสำหรับข้อความที่ล้น

ตัดข้อความที่ล้นออกด้วยจุดไข่ปลา ต้องใช้ร่วมกับ overflow: hidden และ white-space: nowrap

<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>

ข้อความแนวตั้งด้วยโหมดการเขียน

writing-mode เปลี่ยนทิศทางการไหลของข้อความ เมื่อใช้ร่วมกับ text-orientation จะช่วยให้สร้างตัวอักษรแนวตั้งแบบ CJK หรือป้ายข้อความที่หมุนในรูปแบบสร้างสรรค์ได้

<div class="label">Vertical Label Text</div>

ตรวจสอบอย่างรวดเร็ว

ต้องใช้คุณสมบัติสามรายการใดบ้างเพื่อแสดงจุดไข่ปลาเมื่อข้อความล้น?

สรุป

text-align จัดตำแหน่งเนื้อหาแบบอินไลน์ภายในคอนเทนเนอร์ text-decoration เพิ่มหรือลบเส้น text-transform เปลี่ยนรูปแบบตัวพิมพ์ ส่วน white-space: nowrap + overflow: hidden + text-overflow: ellipsis คือสูตรมาตรฐานสำหรับตัดข้อความที่ล้น

คำถามที่พบบ่อย

บทเรียน “การจัดแนว การตกแต่ง และระยะห่างข้อความ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดแนว การตกแต่ง และระยะห่างข้อความ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดแนว การตกแต่ง และระยะห่างข้อความ”

จัดแนวข้อความ เพิ่มเส้นใต้หรือขีดฆ่า และควบคุมระยะห่างระหว่างตัวอักษรกับบรรทัด คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การจัดแนว การตกแต่ง และระยะห่างข้อความ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ตระกูลแบบอักษรและแบบอักษรที่ปลอดภัยบนเว็บ
  2. ขนาด น้ำหนัก และรูปแบบแบบอักษร
  3. การจัดแนว การตกแต่ง และระยะห่างข้อความ
  4. Google Fonts และ @font-face
← กลับไปที่ CSS Academy