สร้างกล่องที่มีข้อความเลื่อนโดยใช้ CSS และ HTML
กล่องเลื่อน HTML คือกล่องที่เพิ่มแถบเลื่อนไปทางด้านขวาและด้านล่างเมื่อเนื้อหาของช่องมีขนาดใหญ่กว่าขนาดของช่อง กล่าวอีกนัยหนึ่งถ้าคุณมีกล่องที่สามารถใส่ได้ประมาณ 50 คำและคุณมีข้อความ 200 คำช่องทำเครื่องหมาย HTML จะใส่แถบเลื่อนขึ้นเพื่อให้คุณเห็นคำเพิ่มเติม 150 คำ ใน HTML มาตรฐานที่จะผลักดันเฉพาะข้อความนอกกรอบ
การทำ HTML scroll นั้นค่อนข้างง่าย คุณเพียงแค่ต้องตั้งค่าความกว้างและความสูงขององค์ประกอบที่คุณต้องการจะเลื่อนจากนั้นใช้คุณสมบัติ CSS overflow เพื่อกำหนดลักษณะที่คุณต้องการให้เลื่อนขึ้น
จะทำอย่างไรกับข้อความเสริม?
เมื่อคุณมีข้อความมากกว่าที่จะพอดีกับพื้นที่ในเค้าโครงของคุณคุณมีตัวเลือกไม่กี่:
- เขียนข้อความใหม่เพื่อให้สั้นลงและพอดี
- อนุญาตให้ข้อความไหลเกินกว่าขีด จำกัด และหวังว่าเค้าโครงสามารถโค้งงอเพื่อรองรับได้
- ตัดข้อความที่เป็นส่วนเกิน
- เพิ่มแถบเลื่อน (โดยปกติจะเป็นแนวตั้งสำหรับข้อความ) เพื่อให้พื้นที่เลื่อนเพื่อแสดงข้อความพิเศษ
ตัวเลือกที่ดีที่สุดคือตัวเลือกสุดท้าย: สร้างกล่องข้อความเลื่อน จากนั้นยังสามารถอ่านข้อความพิเศษได้ แต่การออกแบบของคุณจะไม่ถูกบุกรุก
HTML และ CSS สำหรับนี้จะเป็น:
ล้น: อัตโนมัติ; บอกเบราว์เซอร์เพื่อเพิ่มแถบเลื่อนหากต้องการเพื่อให้ข้อความล้นขอบของ div แต่เพื่อให้การทำงานนี้คุณต้องมีคุณสมบัติความกว้างและความสูงที่ตั้งค่าไว้ใน div เพื่อให้มีขอบเขตล้น
นอกจากนี้คุณยังสามารถตัดข้อความโดยการเปลี่ยนล้น: อัตโนมัติ; overflow: ซ่อน; ถ้าคุณปล่อยให้พร็อพเพอร์ตี้ล้นออกข้อความจะรั่วไหลผ่านขอบเขตของ div
คุณสามารถเพิ่มแถบเลื่อนไปมากกว่าแค่ข้อความ
หากคุณมีภาพขนาดใหญ่ที่ต้องการแสดงในพื้นที่ขนาดเล็กคุณสามารถเพิ่มแถบเลื่อนไปรอบ ๆ ได้เช่นเดียวกับที่คุณใช้กับข้อความ
ในตัวอย่างนี้ภาพ 400x509 อยู่ภายในย่อหน้า 300x300
ตารางจะได้ประโยชน์จากแถบเลื่อน
ตารางข้อมูลยาวจะทำให้อ่านได้ยากมาก แต่โดยวางไว้ภายใน div ที่มีขนาด จำกัด และเพิ่มคุณสมบัติล้นคุณสามารถสร้างตารางที่มีข้อมูลจำนวนมากที่ไม่ใช้พื้นที่มากเกินไปในหน้าเว็บของคุณ .
วิธีที่ง่ายที่สุดก็เหมือนกับรูปภาพและข้อความเพียงเพิ่ม div ลงในตารางตั้งความกว้างและความสูงของ div นั้นและเพิ่มคุณสมบัติ overflow:
| ชื่อ | โทรศัพท์ | สิ่งหนึ่งที่เกิดขึ้นเมื่อคุณทำเช่นนี้คือแถบเลื่อนแนวนอนมักจะปรากฏขึ้นเนื่องจากเบราว์เซอร์อนุมานว่าโครเมี่ยมของแถบเลื่อนซ้อนทับตาราง มีหลายวิธีในการแก้ไขปัญหานี้จากการเปลี่ยนความกว้างของตารางและอื่น ๆ แต่ที่ฉันชอบคือเพียงแค่ปิดการเลื่อนแนวนอนด้วยพร็อพเพอร์ตี้คุณสมบัติ CSS3 - x เพียงเพิ่ม overflow-x: hidden; ไปที่ div และจะลบแถบเลื่อนแนวนอน อย่าลืมทดสอบเพราะอาจมีเนื้อหาที่หายไป Firefox สนับสนุนการใช้แท็ก TBODY สำหรับ Overflowคุณลักษณะที่ดีจริงๆของเบราว์เซอร์ Firefox คือคุณสามารถใช้คุณสมบัติ overflow บนแท็กตารางภายในเช่น tbody และ thead หรือ tfoot ซึ่งหมายความว่าคุณสามารถตั้งแถบเลื่อนบนเนื้อหาของตารางและเซลล์ส่วนหัวจะคงที่เหนือกว่าได้ นี้ทำงานเฉพาะใน Firefox ซึ่งไม่ดีเกินไป แต่เป็นคุณลักษณะที่ดีถ้าผู้อ่านของคุณใช้ Firefox เท่านั้น เรียกดูตัวอย่างนี้ใน Firefox เพื่อดูว่าฉันหมายถึงอะไร
|
|---|