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

shape-outside สำหรับการตัดข้อความขึ้นบรรทัด

จัดข้อความให้ล้อมรอบรูปทรงกำหนดเองด้วย shape-outside บนองค์ประกอบที่ลอย

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

โมดูล CSS Shapes

โมดูล CSS Shapes ช่วยให้ข้อความล้อมรอบรูปทรงที่ไม่ใช่สี่เหลี่ยมได้ พร็อพเพอร์ตีหลักคือ shape-outside ซึ่งกำหนดรูปทรงที่ข้อความจะไหลล้อมรอบ

ข้อกำหนดของ shape-outside

shape-outside ใช้ได้เฉพาะกับ องค์ประกอบแบบลอย องค์ประกอบต้องถูกทำให้ลอย (ไปทางซ้ายหรือขวา) เพื่อให้ข้อความที่อยู่ติดกันไหลล้อมรอบรูปทรงที่กำหนด

<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>

shape-outside: circle()

ข้อความจะไหลล้อมรอบเส้นทางวงกลมที่กำหนดโดยอ้างอิงจากองค์ประกอบแบบลอย:

<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>

shape-outside: ellipse()

ข้อความจะไหลล้อมรอบเส้นทางรูปวงรี:

<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>

shape-outside: polygon()

ข้อความจะไหลล้อมรอบเส้นทางรูปหลายเหลี่ยม ช่วยให้สร้างเลย์เอาต์เชิงบรรณาธิการที่ซับซ้อนได้:

<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>

shape-outside กับรูปภาพ

ส่ง URL เพื่อใช้แชนเนลอัลฟาของรูปภาพเป็นขอบเขตของรูปทรง ข้อความจะไหลล้อมรอบพื้นที่ของรูปภาพที่ไม่โปร่งใส:

<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>

shape-margin

shape-margin เพิ่มช่องว่างระหว่างเส้นทางของ shape-outside กับข้อความที่ไหลล้อม:

<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>

shape-image-threshold

เมื่อใช้รูปภาพกับ shape-outside shape-image-threshold จะกำหนดค่าขีดจำกัดความโปร่งใสอัลฟา (0 ถึง 1) ที่ใช้กำหนดขอบเขตของรูปร่าง

การประยุกต์ใช้ในการออกแบบ

CSS Shapes ช่วยให้สร้างการจัดวางบทความสไตล์นิตยสาร คำพูดยกเน้นที่มีข้อความไหลล้อมรอบรูปภาพตามรูปร่าง และพื้นที่ตัวอักษรต้นย่อหน้าที่มีการไหลของข้อความไม่เป็นรูปแบบได้ ซึ่งก่อนหน้านี้ทำได้เฉพาะในงานออกแบบสิ่งพิมพ์หรือด้วย SVG

การรองรับของเบราว์เซอร์

shape-outside ที่ใช้รูปร่างพื้นฐาน (วงกลม วงรี รูปหลายเหลี่ยม และสี่เหลี่ยมเว้า) รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด ส่วน shape-outside ที่ใช้ URL ของรูปภาพรองรับได้กว้างกว่า แต่อาจแตกต่างกันไป โปรดทดสอบเสมอ

ตัวอักษรต้นย่อหน้าแบบตกแต่ง: ตัวอย่างใช้งานจริง

พื้นที่ตัวอักษรต้นย่อหน้าเป็นรูปสามเหลี่ยม ซึ่งข้อความไหลล้อมรอบตัวอักษรตกแต่งขนาดใหญ่:

<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>

ตรวจสอบความเข้าใจ

องค์ประกอบต้องมีอะไรบ้างจึงจะใช้ shape-outside ได้

สรุป

shape-outside ทำให้ข้อความไหลล้อมรอบรูปร่างที่ไม่ใช่สี่เหลี่ยม ซึ่งกำหนดไว้บนองค์ประกอบแบบลอย รูปร่างอาจเป็นวงกลม วงรี รูปหลายเหลี่ยม หรือช่องอัลฟาของรูปภาพ ใช้ shape-margin เพื่อเพิ่มพื้นที่เผื่อ และใช้ร่วมกับ clip-path เพื่อให้องค์ประกอบดูสอดคล้องกับรูปร่างที่กำหนดไว้

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

บทเรียน “shape-outside สำหรับการตัดข้อความขึ้นบรรทัด” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “shape-outside สำหรับการตัดข้อความขึ้นบรรทัด”

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

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

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

บทเรียน “shape-outside สำหรับการตัดข้อความขึ้นบรรทัด” ใช้เวลานานแค่ไหน

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

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

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

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

  1. clip-path ด้วย polygon() และ circle()
  2. shape-outside สำหรับการตัดข้อความขึ้นบรรทัด
  3. การทำแอนิเมชันรูปทรง clip-path
  4. CSS Masks เทียบกับ Clip-path
← กลับไปที่ CSS Academy