รายการเพิ่มเติม

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

ตัวเลือกการตัดใน CSS มี 2 แบบ ได้แก่ text-overflow จะช่วยตัดข้อความแต่ละบรรทัด และพร็อพเพอร์ตี้ overflow จะช่วยควบคุมส่วนที่ตัดออกในโมเดลกล่อง

เกินบรรทัดเดียวด้วย text-overflow

ใช้พร็อพเพอร์ตี้ text-overflow ในองค์ประกอบที่มีโหนดข้อความ เช่น ย่อหน้า <p> ซึ่งจะระบุลักษณะที่ข้อความจะปรากฏเมื่อไม่พอดีกับพื้นที่ว่างขององค์ประกอบ ข้อความ HTML ที่มองเห็นได้ทั้งหมดในหน้าเว็บอยู่ในโหนดข้อความ หากต้องการใช้ text-overflow คุณต้องมีข้อความบรรทัดเดียวที่ไม่ได้ตัดขึ้นบรรทัดใหม่ ดังนั้นคุณต้องตั้งค่า overflow เป็น hidden และมีค่า white-space ที่ป้องกันไม่ให้ตัดขึ้นบรรทัดใหม่ด้วย

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

การใช้พร็อพเพอร์ตี้การแสดงผลที่ overflow

พร็อพเพอร์ตี้ Overflow ตั้งค่าในองค์ประกอบเพื่อควบคุมสิ่งที่จะเกิดขึ้นเมื่อองค์ประกอบย่อยต้องการพื้นที่มากกว่าที่มี ซึ่งอาจเกิดจากความตั้งใจ เช่น ในแผนที่แบบอินเทอร์แอกทีฟอย่าง Google Maps ที่ผู้ใช้เลื่อนดูรูปภาพขนาดใหญ่ที่ตัดให้มีขนาดที่เจาะจง หรืออาจเกิดขึ้นโดยไม่ตั้งใจ เช่น ในแอปพลิเคชันแชทที่ผู้ใช้พิมพ์ข้อความยาวๆ ซึ่งไม่พอดีกับกล่องข้อความ

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

การเลื่อนในแกนแนวตั้งและแนวนอน

พร็อพเพอร์ตี้ overflow-y จะควบคุมการเลื่อนออกตามแนวตั้งของวิวพอร์ตอุปกรณ์ ดังนั้นจึงเลื่อนขึ้นและลง

พร็อพเพอร์ตี้ overflow-x จะควบคุมการเลื่อนออกตามแนวนอนของวิวพอร์ตของอุปกรณ์ ดังนั้นจึงเลื่อนไปทางซ้ายและขวา

พร็อพเพอร์ตี้เชิงตรรกะสำหรับทิศทางการเลื่อน

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

พร็อพเพอร์ตี้ overflow-inline และ overflow-block จะตั้งค่าการเลื่อนออกตามทิศทางของเอกสารและโหมดการเขียน

ชวเลข overflow

ตัวย่อ overflow จะตั้งค่าทั้งสไตล์ overflow-x และ overflow-y ในบรรทัดเดียว

overflow: hidden scroll;

หากระบุคีย์เวิร์ด 2 รายการ คีย์เวิร์ดแรกจะมีผลกับ overflow-x และ คีย์เวิร์ด 2 จะมีผลกับ overflow-y ไม่เช่นนั้น ทั้ง overflow-x และ overflow-y จะใช้ค่าเดียวกัน

ค่า

มาดูรายละเอียดเกี่ยวกับค่าและคีย์เวิร์ดที่ใช้ได้กับพร็อพเพอร์ตี้ overflow

overflow: visible (ค่าเริ่มต้น)
หากไม่ได้ตั้งค่าพร็อพเพอร์ตี้ overflow: visible จะเป็นค่าเริ่มต้นสำหรับเว็บ วิธีนี้ช่วยให้มั่นใจว่าเนื้อหาจะไม่ถูกซ่อนโดยไม่ตั้งใจและเป็นไปตามหลักการหลักของ "ไม่ซ่อนเนื้อหา" หรือ "เลย์เอาต์ที่ปลอดภัยของเลย์เอาต์ที่แม่นยำ"
overflow: hidden
เมื่อใช้ overflow: hidden ระบบจะตัดเนื้อหาในทิศทางที่ระบุ และจะไม่แสดงแถบเลื่อน
overflow: scroll
overflow: scroll เปิดใช้แถบเลื่อนเพื่อให้ผู้ใช้เลื่อนดูเนื้อหาได้ แถบเลื่อนจะปรากฏขึ้นแม้ว่าตอนนี้เนื้อหาจะไม่ได้แสดงเกินขอบก็ตาม วิธีนี้เป็นวิธีที่ดีในการลดการเปลี่ยนแปลงเลย์เอาต์ในอนาคต หากคอนเทนเนอร์อาจเลื่อนได้ในอนาคตโดยอิงตามการปรับขนาด เป็นต้น และเตรียมผู้ใช้ให้พร้อมสำหรับพื้นที่ที่เลื่อนได้
overflow: clip
เช่นเดียวกับ overflow: hidden เนื้อหาที่มี overflow: clip จะได้รับการครอบตัดให้พอดีกับกล่องระยะห่างจากขอบขององค์ประกอบ ความแตกต่างระหว่าง clip กับ hidden คือคีย์เวิร์ด clip จะห้ามการเลื่อนทั้งหมดด้วย รวมถึงการเลื่อนแบบเป็นโปรแกรม
overflow: auto
สุดท้ายคือค่าที่ใช้กันมากที่สุด overflow: auto ซึ่งจะเป็นไปตามค่ากําหนดของผู้ใช้และแสดงแถบเลื่อนหากจําเป็น แต่ซ่อนไว้โดยค่าเริ่มต้น และให้ผู้ใช้และเบราว์เซอร์เป็นผู้รับผิดชอบการเลื่อน

การเลื่อนและการวางซ้อน

ลักษณะการทํางานของ overflow หลายรายการเหล่านี้จะแสดงแถบเลื่อน แต่ก็มีลักษณะการเลื่อนและพร็อพเพอร์ตี้บางอย่างที่เฉพาะเจาะจงซึ่งช่วยคุณควบคุมการเลื่อนในคอนเทนเนอร์ที่รองรับการแสดงผลส่วนเกินได้

การเลื่อนและการช่วยเหลือพิเศษ

คุณต้องตรวจสอบว่าพื้นที่ที่เลื่อนได้ยอมรับโฟกัสเพื่อให้ผู้ใช้แป้นพิมพ์สามารถกด Tab ไปยังช่อง แล้วใช้แป้นลูกศรเพื่อเลื่อนได้

หากต้องการให้ช่องเลื่อนยอมรับโฟกัส ให้เพิ่ม tabindex="0", ชื่อที่มีแอตทริบิวต์ aria-labelledby และแอตทริบิวต์ role ที่เหมาะสม เช่น

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

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

ในวิดีโอการใช้ CSS เพื่อบังคับใช้การช่วยเหลือพิเศษ Adrian Roselli แสดงให้เห็นว่า CSS ช่วยป้องกันความถดถอยของการช่วยเหลือพิเศษได้อย่างไร เช่น หากต้องการเปิดการเลื่อนและเพิ่มตัวบ่งชี้โฟกัสเฉพาะในกรณีที่ใช้แอตทริบิวต์ที่ถูกต้องเท่านั้น กฎต่อไปนี้จะทำให้กล่องเลื่อนได้ก็ต่อเมื่อมีแอตทริบิวต์ tabindex, aria-labelledby และ role

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

การวางตำแหน่งแถบเลื่อนภายในรูปแบบกล่อง

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

root-scroller กับ implicit-scroller

คุณอาจสังเกตเห็นว่าตัวเลื่อนบางรายการมีพฤติกรรมการดึงเพื่อรีเฟรชและพฤติกรรมพิเศษอื่นๆ โดยเฉพาะเมื่อพัฒนาแอปพลิเคชันสำหรับอุปกรณ์เคลื่อนที่และแอปพลิเคชันไฮบริด ลักษณะการเลื่อนนี้จะเกิดขึ้นใน scroller รูท หน้าเว็บจะมีตัวเลื่อนรูทเพียงรายการเดียวเท่านั้น โดยค่าเริ่มต้น documentElement จะเป็นตัวเลื่อนระดับรูทของหน้าเว็บ แต่การเปลี่ยนองค์ประกอบที่จะเป็นตัวเลื่อนระดับรูทจะทำให้ใช้ลักษณะการทำงานพิเศษกับตัวเลื่อนอื่นๆ นอกเหนือจาก documentElement ได้ เราเรียกตัวเลื่อนใหม่นี้ว่าตัวเลื่อนระดับรูทโดยนัย

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

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

scroll-behavior

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 15.4.

Source

scroll-behavior ให้คุณเลือกรับการเลื่อนไปยังองค์ประกอบที่ควบคุมโดยเบราว์เซอร์ ซึ่งช่วยให้คุณระบุวิธีจัดการการนําทางในหน้าเว็บ เช่น .scrollTo() หรือลิงก์

ซึ่งจะเป็นประโยชน์อย่างยิ่งเมื่อใช้ร่วมกับ prefers-reduced-motion เพื่อระบุลักษณะการเลื่อนตามความต้องการของผู้ใช้

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Browser Support

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

หากคุณเคยเลื่อนไปจนสุดของส่วน Modal Overlay แล้วเลื่อนต่อและหน้าเว็บที่อยู่หลังส่วนดังกล่าวก็เลื่อนไปด้วย นี่เป็นการเชื่อมต่อการเลื่อนหรือการส่งผ่านไปยังคอนเทนเนอร์การเลื่อนหลัก พร็อพเพอร์ตี้ overscroll-behavior ช่วยป้องกันไม่ให้การเลื่อนแบบเลื่อนออกแสดงในคอนเทนเนอร์หลัก (เรียกว่าการเชื่อมโยงการเลื่อน)

ทดสอบความเข้าใจ

ทดสอบความรู้เรื่องการล้น

ข้อความที่ตัดออกและองค์ประกอบที่ตัดออกเหมือนกันไหม

เท็จ
จริง

พร็อพเพอร์ตี้ overflow ยอมรับคีย์เวิร์ด 2 รายการ คีย์เวิร์ดแรกใช้กับแกนใด

แนวตั้ง
แนวนอน

แถบเลื่อนใช้พื้นที่ใดในโมเดลกล่องเมื่อแสดงและแสดงในบรรทัด

กล่องระยะห่างจากขอบ
กล่องระยะขอบ
กล่องเส้นขอบ
กล่องเนื้อหา

หากต้องการเก็บโมเมนตัมเพิ่มเติมจากการเลื่อนใน Scroller Implicit ที่ฝังอยู่ คุณจะใช้พร็อพเพอร์ตี้ใด

scroll-padding
scroll-behavior
overscroll-effect
scroll-hint
overscroll-behavior

แหล่งข้อมูล

Overflow และ Data Loss ใน CSS จาก Smashing Magazine